Le hook ngOnDestroy dans Angular

Le hook ngOnDestroy se déclenche lors de la suppression du composant. Dans ce hook, on peut libérer des ressources, supprimer les abonnements aux événements des éléments, arrêter les minuteries, etc.

La création et la suppression d'un composant dans Angular se produisent lorsqu'il est affiché et masqué réactivement via une condition if. Autrement dit, Angular ne se contente pas de masquer les composants, mais les supprime et les restaure.

Les composants sont également créés et supprimés lorsqu'ils sont parcourus de manière réactive dans des boucles. Dans ce cas, Angular crée et supprime également les composants.

Essayons en pratique. Importons l'interface OnDestroy :

app/user/user.component.tsimport { OnDestroy } from '@angular/core';

Connectons-la à la classe :

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  
}

Et maintenant, écrivons notre hook :

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  constructor() {
    console.log('constructor is started');
  }
  
  ngOnDestroy() {
    console.log('onDestroy is applied');
  }
}