I am trying to refresh an angular component whenever I update the components @Input property using ngOnChanges() method but it is not working.
Scenario is as below:
I have an component called all-tasks.component whose template is defined as below:
<div class="row">
<div class="col-sm-4">
<app-pie-chart
(chartSelected)="filterByChartSelection($event)"></app-pie-chart>
</div>
<div class="col-sm-8">
<h4> All Tasks </h4>
<app-tasks [chartInput]="piechart_serviceInput"></app-tasks>
</div>
app-pie-chart component is a pie-chart component and app-tasks is a component hosting a HTML table with some data being consumed from a service.
Now if the user selects on any label of the pie-chart, I want the table on the right hand side to refresh with rows containing only the selected label value from the pie-chart.
For this, I have been able to successfully emit an @Output event from the app-pie-chart component and receive it on the all-tasks component.
However, I am not able to set the emitted value to the @Input element of the all-task component to refresh the table. I have used the ngOnChange() and tried to put a simple console.log statement, but even that does not print.
Code to emit the event from the app-pie-chart
@Output() chartSelected = new EventEmitter<{serviceName: string, label: string}>();
this.chartSelected.emit({serviceName: 'filterByApp', label: this.p_data.labels[event.element._index]});
Code to receive the output event and set it to the @ Input attribute in app-tasks component
Code in all-tasks.component.ts file
piechart_serviceInput: Piechart[] = [];
filterByChartSelection(selectedChartData: {serviceName: string, label: string} ) {
this.piechart_serviceInput.pop();
this.piechart_serviceInput.push({
serviceName: selectedChartData.serviceName,
label: selectedChartData.label
});
}
Here in the above code, we have set the retrieved values from the Output event to be sent in the Input parameter of the app-tasks component via the all-tasks.component.ts file
The definition of the Input parameter in the app-tasks component and its ngOnChange definition is as below:
@Input('chartInput') chartInput: {serviceName: string, label: string};
ngOnChanges(changes: SimpleChanges) {
console.log('ngOnChanges was called!');
this.tasks = this.service.getTasksByLabelAndServiceName(this.chartInput.serviceName, this.chartInput.label);
console.log('Tasks component data: ' + this.tasks);
}
I have made sure that the Output event is getting emitted and received properly via console.log statements. However, it is in the setting to the @ Input parameters that I am finding a problem.
Can anyone please guide me ?
Is it because we are trying to set the Input attribute in the app-tasks component which is a simple javascript object with a Array type object from the all-tasks.component.ts file??
