How can I make the child component detect changes to properties inside an object passed via...

I'm working on an Angular project (v16), and I have a parent component passing data to a child component via an @Input() property. However, when the parent updates the value, the child component doesn't seem to react to the change.

Here's the relevant code:

Parent component:

<app-child [item]="selectedItem"></app-child>

export class ParentComponent {
selectedItem = { id: 1, name: 'Item 1' };

updateItem() {
this.selectedItem.name = 'Updated Item';
}
}


Child component:

@Component({ selector: 'app-child', ... })
export class ChildComponent implements OnInit {
@Input() item: any;

ngOnInit() {
console.log('Initial item:', this.item);
}
}



When I click a button in the parent that runs updateItem(), I expect the child component to reflect the updated value, but it doesn't.

What I tried:

Using ngOnChanges() in the child, but it doesn't get triggered.

Logging the item in ngDoCheck(), but change detection doesn't pick up the change unless the reference changes.

Expected Behavior: The child should detect changes inside the item object, not just when the reference changes.

Continue reading...