Within the childComponent @input() method, I am sending an array of objects where each object has 3 properties: name, id, and selected (boolean). My goal is to change only the selected property in the array and pass it to the child component for rendering. However, the changes are not being detected.
I have experimented with using ngDoCheck, which does work but runs continuously, so I am seeking a more efficient alternative solution. Is there any other way to achieve this?
I also attempted to use ngOnChanges, but since only the value is changing and not the reference, it did not work as expected.
parent.ts
type model={
name:string,
id:int,
selected:boolean
}
public dataArray:model[]=[];
parent.html
<child-component>
*ngFor="let item of dataArray;"
[item]="item"
></child-component>
child-component.ts
@Input() public item:model;
child-component.html
<h3>{{item | json}}</h3>
Initially, when passing the array for the first time, the child component successfully renders the values. However, after making changes to the array, those changes are not reflected in the child component.
For example, let's consider two objects:
First Time:
[
{name:"item1",id:1,selected:false},
{name:"item2",id:2,selected:false}
]
After Updating:
[
{name:"item1",id:1,selected:true}, // 'true' is updated
{name:"item2",id:2,selected:false}
]
Subsequently, after modifying the array, the child component fails to detect these changes.
If I resort to using ngDocheck, the functionality works fine; however, due to its continuous execution, I prefer not to rely on it.