In my project, I have two simple components: parent and child. The parent component contains an Array and for each element in the array, it renders the child component.
parent.component.ts
export class parent implements OnInit {
data: CustomType[] = [
{
id: "child1",
records: [] // array of string
},
{
id: "child2",
records: [] // array of string
}
];
ngOnInit() {}
}
parent.component.html
<section>
<ChildComponent *ngFor="let child of data | async" [obj]="child"/>
</section>
child.component.ts
export class child implements OnInit {
// Data is passed from the parent component
@Input() obj: CustomType;
ngOnInit() {}
}
child.component.html
<div>
{{ obj.id }}
</div>
The Issue
While the current code is functional, the problem arises when the records of an element in the array change, causing all child components to re-render. I am seeking a solution to re-render only the specific component that has changed.
I am exploring the use of onPush Change Detection in this scenario.
For Instance:
If data[0].records is altered, only the child component corresponding to data[0] should re-render.