Why ngOnChanges() does not trigger when @Input() update the data Angular 8?

Question

parent.component.html

<parent-comp [data]="mydata"> </parent-comp>

parent.component.ts

this.service.abc$
        .takeUntil(this.ngUnsubscribe.asObservable())
        .subscribe((data: myType[]) => {
            this.mydata= data;
        });

child.component.ts

@Input data;

Under Class I have below code

public ngOnChanges() { if (this.data) { console.log(this.data); } }

Now I want whenever I receive latest data in @Input data from Parent Component to child then my ngOnChanges function should trigger and print data in console.

But unfortunately ngOnChanges function does not trigger again. It trigger only once when component initialize

Please let me know if anyone wants more detail on same!

Thanks!

Answer 1

Given the lack of further information, I'd make an informed guess that @Input data is either an array or an object.

According to docs, ngOnChanges is:

A lifecycle hook that is called when any data-bound property of a directive changes.

What it doesn't say however is how the property should be changed. Generally speaking, the hook is only triggered when the reference to the property is changed.

Consider the following eg.

Parent component controller

mydata = [];

updateMyData(value: any) {
  this.mydata.push(value);
}

Parent component template

<app-child [data]="mydata"></app-child>

Child component controller

@Input() data: any;

ngOnChanges(changes: SimpleChanges) {
  console.log(changes);
}

Now you'd expect the ngOnChanges will be triggered every time the updateMyData() function is called in the parent component. But the reference to the variable mydata is never changed. So the hook won't be triggered. There are multiple ways to force the change detector to trigger the hook.

Method 1: Bind the @Input decorator to a setter instead of the variable directly. Discussed in an answer already.

Method 2: Use spread syntax to re-assign the variable in the parent component.

Parent component controller

mydata = [];

updateMyData(value: any) {
  this.mydata = [...this.mydata, value];
}

You could use the same methods for objects as well.

Answer 2

Thank you everyone for your quick and effective solutions.

I got solution and it is not exactly but similar to what you guys suggested.

In the Parent Component:

**Earlier I was assigning this way**
`this.mydata= data;`


**But now I am assigning in below way:**
`this.mydata= cloneDeep(data);`

Note : cloneDeep is imported from lodash