The Sample Component contains data in the form of an array of objects with child components within a loop. Sample.component
export class SampleComponent implements OnInit {
data = [{ value: 3 }, { value: 1 }];
constructor() {}
ngOnInit(): void {}
valueChange() {
this.data[1].value = 5;
this.data = [...this.data];
}
whenComponentRerendered() {
console.log('Parent component rerendered');
}
consoleOutput() {
console.log('Console from button click');
}
}
<button (click)="valueChange()">
Change input to 5
</button>
<ng-container *ngFor="let item of data">
<app-samplechild [data]="item"></app-samplechild>
</ng-container>
It is now necessary to detect changes whenever any value in the object is altered in the parent component.
export class SamplechildComponent implements OnInit {
@Input('data') data!: any;
constructor() {}
ngOnInit(): void {}
whenComponentRerendered() {
console.log('child component rerendered');
}
changeValue() {
this.data.value = 5;
}
}
<p>
The value from parent is
{{ data | json }}
</p>
I am facing issues in capturing the changes since the data is not set as an Input value. How can I track changes in the child? StackBlitz Note: This code snippet is for demonstration purposes; in real scenarios, the data may consist of numerous arrays of objects with complex hierarchies.