I have a question regarding data binding. In my project, I have a parent component and two child components: Parent:
directives: [firstChild,secondChild],
template:'
<first-child [showList]="showList" (emitShowList)="getShowList($event)"></history-months-avg-header>
<second-child [showList]="showList" (emitShowList)="getShowList($event)"></history-months-avg-header>
'
export class FlexProductListComponent {
private showList:any[]=[];
getShowList(show:any[]){
this.showList = show;
console.log('new list',this.showList);
}
}
First child component:
directives: [],
template:'
<button (click)="showHistoryDetails();" ><i class="fa fa-angle-double-right" aria-hidden="true" ></i></button>
export class firstChild{
@Output() emitShowList = new EventEmitter<any[]>();
@Input() showList: any[];
public showHistoryStatus: boolean = false;
showHistoryDetails() {
if (this.showHistoryStatus) {
this.showHistoryStatus = false;
this.showList = this.removeFromShowList(this.showList,this.HistoryComponent);
console.log('changing to no',this.showList);
this.emitShowList.emit(this.showList);
} else {
this.showHistoryStatus = true;
this.showList.push(this.HistoryComponent);
this.emitShowList.emit(this.showList);
}
}
'
Second child component:
/*component etc*/
directives:[],
template: ``
export class secondChild{
@Input() allHistoryChannels:any;
@Input() set showList(var:any[]){
console.log(var);
/*other actions*/
};
Now, the issue arises. When I click on the button in the first child component to add or remove an item from the array and then emit the edited array (showList) to the parent component. The parent component receives the updated data and overrides the current data in the showList property. The new value in the showList property should be passed down to all bound child components. However, it doesn't work as expected. The second child component only logs at the start when the show list is empty. I always assumed that when we override a parent property that is bound to child components, the new value would propagate to all bound child components. It seems like I am mistaken. Can someone help me find a solution to this problem? Thank you :)