Why is the OnChanges hook not working?

Question

JavaScript

There is a parent and child component. A number and an object are passed from the parent to the child by clicking on the buttons. Further, in the template of the child component, the passed values ​​are displayed. They come out without problems.
STACKBLITZ
But in the child component, I implemented the OnChanges() hook, which also displays these values. The problem is that if a number arrives, this hook is executed, but if an object arrives, it is not.
I understand that from the point of view of a variable, as it was an object, it remained so. Therefore, everything that happens is logical. But I would like to modify the code so that OnChanges works in both cases. If this is possible, please help to implement it.

Answer 1

The OnChanges hook does not work on the object, since the reference to the object does not change. It's still the same object, even if the contents of the object have changed. For this hook to work, you need to create a new object or use the DoCheck hook and write the change detection logic yourself
Here is an example - link