ngOnChanges not firing if an @Input is receiving an object

Parent component template:

<my-component [param]="whatever"></my-component>


Parent component code:

whatever = { value1: 0, value2: 1, value3: 'foo' };


Child component code:

@Input() public param: any;

ngOnChanges() {
console.log('Received input: ', param);
}


This isn't working. Any change to whatever will be unnoticed by the child component and ngOnChanges won't fire.

It also doesn't work if I try to use a setter:

@Input() set param(value) {
console.log(value);
}


And it doesn't help if I try to run a manual zone update in the parent component.

Apparently @Input() can only detect when an object's structure has changed, but not its values.

So how can I pass an object as an @Input() property and have the child component detect value changes?

Continue reading...