Angular ngOnChanges not called after ngOnDestroy of parent

Question

I have a child component which accepts an input

<app-custom [customModel]="customModel"></app-custom>

In the child component, I detect changes to the customModel input by doing:

@Input() customModel: CustomModel;

ngOnChanges(changes: SimpleChanges) {
  console.log('changes', changes); // -> does not get called from ngOnDestroy of parent 
}

In my parent component, I want to notify the child component when the parent is going to be destroyed

customModel = null;

ngOnDestroy() {
  let obj = new CustomModel();
  obj.state = 0;
  this.customModel = obj;
}

The ngOnChanges of child component is not called when the input customModel changes in parent's ngOnDestroy. Why could this be happening?

I have an audio element in the child, and the audio is still being heard even after parent is destroyed.

The ngOnChanges is called in other cases when I change the input, but not through ngOnDestroy

If parent dies, the child dies as well, therefore the PARENT - CHILD relation. You can reference the child component with ViewChild, and then call it's method from parent in ngOnDestroy — Dino, Dec 09 '19 at 10:58
@Dino I can have multiple such children in the parent, how do I do it then? — user5155835, Dec 09 '19 at 11:11

Bilel-Zheni · Accepted Answer · 2019-12-09T12:30:26.900

0

I think because child component gets destroyed before its parent. You can check this with a simple log inside the ngOnDestroy() method on both components.

Update

So if you want to stop the currently running audio just do it inside the child component when it's being destroyed.

edited Dec 09 '19 at 12:30

answered Dec 09 '19 at 11:04

Bilel-Zheni

1,202
1
6
10

when you change the customModel input inside the ngOnDestroy() parent's method the child component doesn't even exist so it can't handle this. – Bilel-Zheni Dec 09 '19 at 11:13
Then how can I pass data to the child component in this case? I have an audio element in the child, and the audio keeps on playing even after parent is destroyed – user5155835 Dec 09 '19 at 11:14
just tell us more about your requirements – Bilel-Zheni Dec 09 '19 at 11:15
I have an audio element in the child component. When the parent is destroyed, the audio from child component is still being heard – user5155835 Dec 09 '19 at 11:16
you can handle this inside the ngOnDestroy() child's method – Bilel-Zheni Dec 09 '19 at 11:18

Angular ngOnChanges not called after ngOnDestroy of parent

1 Answers1