The onChanges callback isn't called when updating the content of a bound object

[templth]

Hello,

Following a question on StackOverflow, I wonder why the onChanges is called when a bound object is updated (a new value) but not when the content of a bound object is updated.

Here is the following use case:

export class AppComponent implements OnChanges {
    test: { one: string; } = { one: "1" };

    ngOnChanges() {
      console.log('updated');
    }

    clicked() {
        // The ngOnChanges method is called
        this.test = { one: 3 };

        // The ngOnChanges method isn't called
        this.test.one = "4";
    }
}

Thanks for your help!
Thierry

[pkozlowski-opensource]

By default change detection system does reference comparison for objects - it doesn't do deep comparison by default as it would be too costly and would negatively impact performance.

If you need to deep-observe object for changes you can do it explicitly using key-value differs. You can check implementation of the NgStyle directive for an example usage of a differ.

[templth]

Thanks very much, Pawel! That makes sense ;-)

[templth]

You tell "by default change detection ...". Is it possible to change this behavior in applications?

Thanks!

[mrajcok]

Just FYI, if you want to do the explicit checks yourself, you need to implement ngDoCheck() (which is called every change detection cycle) and do the checks inside that method. (This is what the NgStyle directive example shows, but the ngDoCheck() part might not be obvious.)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}