C'est le tout dernier souffle de votre composant. Cette méthode est appelée juste avant qu'Angular ne détruise la page (par exemple, quand vous cliquez sur un lien pour changer de vue).
Si vous lancez un chronomètre (setInterval) et que vous changez de page, le composant visuel disparaît... mais le chronomètre, lui, continue de tourner en arrière-plan à l'infini ! Cela crée des bugs et ralentit l'application (fuite de mémoire).
La méthode ngOnDestroy() sert à faire le ménage. C'est ici qu'on arrête définitivement nos chronomètres, qu'on annule nos abonnements aux serveurs et qu'on désactive tout ce qui pourrait tourner dans le vide.
Cette horloge se met à jour chaque seconde. Si vous allez sur une autre page du site, ngOnDestroy() va attraper l'événement et détruire le mécanisme interne pour économiser de la mémoire.
import { Component, OnDestroy } from '@angular/core';
@Component({
selector: 'app-clock',
template: `
<div>{{ currentTime }}</div>
`
})
// N'oubliez pas d'ajouter "implements OnDestroy"
export class ClockComponent implements OnDestroy {
currentTime: string = new Date().toLocaleTimeString();
private intervalId: any;
constructor() {
// 1. On démarre l'horloge (elle tourne en tâche de fond)
this.intervalId = setInterval(() => {
this.currentTime = new Date().toLocaleTimeString();
console.log('Tic Tac...');
}, 1000);
}
// 2. Angular appelle cette fonction pile avant de détruire le composant
ngOnDestroy() {
if (this.intervalId) {
// On détruit la tâche de fond pour libérer la mémoire !
clearInterval(this.intervalId);
console.log('Composant détruit, horloge arrêtée !');
}
}
}