how to pass data to the nested component in Angular 8?

Question

In a parent html, I have many components such as chart 1,2,3,4,5. Then whenever I changed the date, I want to send the selected date to all the components. The code below is the implementation of the parent child event emitter. But I am getting no value from this html file when I check <kt-chart1> component? Also, I want to know when I get the data so I can sort chart by date by executing functions.

html

<!-- ----------------------------------------------------------------------- -->
<!--                            date range field                             -->
<!-- ----------------------------------------------------------------------- -->
<div class="row">
    <div class="col-xl-4">
        <mat-form-field class="flex-container">
            <div [formGroup]="form">
                <input
                    matInput
                    placeholder="Choose a date"
                    [satDatepicker]="picker2"
                    formControlName="date"
                    (dateChange)="DateChanged($event)"
                />
            </div>
            <sat-datepicker #picker2 [rangeMode]="true"> </sat-datepicker>
            <sat-datepicker-toggle
                matSuffix
                [for]="picker2"
            ></sat-datepicker-toggle>
        </mat-form-field>
        <div class="col-xl-6 chartPadding">
        <h4 class="text-center">Cost Per Tonne</h4>
        <kt-chart1 (sendingDateEmitter)="receivedDate($event)"></kt-chart1>
        <kt-chart2 (sendingDateEmitter)="receivedDate($event)"></kt-chart2>
        <kt-chart3 (sendingDateEmitter)="receivedDate($event)"></kt-chart3>

    </div>
    </div>
</div>

Typescript

    @Output() sendDateEmitter = new EventEmitter<any>();

    DateChanged($event) {
        this.sendDateEmitter.emit($event.value);

    }

Bojan Kogoj · Accepted Answer · 2020-05-20 08:18:37Z

1

To each of the charts add

@Input() date: Date;

And pass it to charts

<kt-chart1 (sendingDateEmitter)="receivedDate($event)" [date]="form.get('date').value"></kt-chart1>
<kt-chart2 (sendingDateEmitter)="receivedDate($event)" [date]="form.get('date').value"></kt-chart2>

Make sure form is initialized before rendering, otherwise you might need to do something like [date]="form.get('date')?.value"

To detect date changes in chart use OnChanges

ngOnChanges(changes: SimpleChanges) {
  if (changes.date) {
    // Date has changed, do something with it.
  }
}

edited May 20, 2020 at 8:18

answered May 20, 2020 at 8:09

Bojan Kogoj

5,6984 gold badges39 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jay Liu Over a year ago

Then do I need to Output vaule with emitter? I want to do something with the data received. probably changing the date of the chart. then how do I know if I am getting the value or not

Bojan Kogoj Over a year ago

I added how to detect date change in your chart

Jay Liu Over a year ago

it's property biding and then I don't need a event emitter at all. Is that right? what is the use of the question mark in form.get?

Bojan Kogoj Over a year ago

Yes, it is binding so remove Emitter entirely. If template renders before form is initialized it will throw something like cannot read property value of undefined because form.get('date') will be undefined. Read more about Optional chaining

Manish · Accepted Answer · 2020-05-20 11:51:09Z

0

Why don't you just declare a variable and bind it to Child's input parameter. Something like this:

Parent Component:

parentDate: Date;

DateChanged($event) {
  this.parentDate = $event.value);
}

Parent Component html:

<kt-chart1 [childDate]="parentDate"></kt-chart1>

Child Component

@Input() childDate: Date;

Angular will automatically take care of all the event emitter and passing of data you are taking to do.

edited May 20, 2020 at 11:51

answered May 20, 2020 at 9:32

Manish

6,32419 gold badges67 silver badges91 bronze badges

Collectives™ on Stack Overflow

how to pass data to the nested component in Angular 8?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related