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

Answer 1

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.