Comment utiliser ngOnDestroy dans Angular ? ​

ngOnDestroy est un hook de cycle de vie Angular qui est appelé lorsqu'un composant ou un directive est détruit. Vous pouvez l'utiliser pour effectuer des tâches de nettoyage avant que le composant soit détruit, comme annuler des abonnements à des observables ou détruire des objets créés dans le composant.

Voici comment utiliser ngOnDestroy dans votre composant Angular :

1. Importez l'interface OnDestroy dans votre composant :

import { Component, OnDestroy } from '@angular/core';

import { Component, OnDestroy } from '@angular/core';

2. Faites en sorte que votre composant implémente l'interface OnDestroy :

export class MyComponent implements OnDestroy {
  // ...
}

export class MyComponent implements OnDestroy {
  // ...
}

3. Implémentez la méthode ngOnDestroy dans votre composant :

ngOnDestroy() {
  // Cette méthode sera appelée lorsque le composant sera détruit. Vous pouvez y mettre votre code de nettoyage ici.
}

ngOnDestroy() {
  // Cette méthode sera appelée lorsque le composant sera détruit. Vous pouvez y mettre votre code de nettoyage ici.
}

Voici un exemple de composant qui utilise ngOnDestroy pour annuler l'abonnement à un observable lorsque le composant est détruit :

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: `
    <h1>Mon composant</h1>
    <p>{{ message }}</p>
  `,
})
export class MyComponent implements OnDestroy {
  message = 'Salut !';
  private messageSubscription: Subscription;

  constructor() {
    this.messageSubscription = interval(1000).subscribe((value) => {
      this.message = `Nouveau message ${value}`;
    });
  }

  ngOnDestroy() {
    this.messageSubscription.unsubscribe();
  }
}

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: `
    <h1>Mon composant</h1>
    <p>{{ message }}</p>
  `,
})
export class MyComponent implements OnDestroy {
  message = 'Salut !';
  private messageSubscription: Subscription;

  constructor() {
    this.messageSubscription = interval(1000).subscribe((value) => {
      this.message = `Nouveau message ${value}`;
    });
  }

  ngOnDestroy() {
    this.messageSubscription.unsubscribe();
  }
}

Vous pouvez utiliser ngOnDestroy dans votre template de composant comme ceci :

<app-my-component></app-my-component>

<app-my-component></app-my-component>

Lorsque le composant sera détruit, la méthode ngOnDestroy sera appelée et l'abonnement à l'observable sera annulé. Cela permet de libérer les ressources utilisées par l'abonnement et d'éviter les fuites de mémoire.

DestroyRef ​

Dans la version 16 d'Angular, une nouvelle fonctionnalité a été introduite pour offrir une plus grande flexibilité lors de l'utilisation du hook ngOnDestroy. Le hook ngOnDestroy permet d'exécuter du code de nettoyage lorsqu'un composant, une directive, un service ou un pipe Angular est détruit.

Auparavant, ngOnDestroy était une méthode classique définie dans la classe du composant, et elle était automatiquement appelée lorsque le composant était détruit. Cependant, cette approche était limitée car il n'était pas possible de l'utiliser en dehors de la classe du composant ou de l'injecter dans d'autres services.

Dans la version 16, le hook ngOnDestroy est devenu injectable. Cela signifie que vous pouvez maintenant injecter un objet DestroyRef correspondant à un composant, une directive, un service ou un pipe, et vous pouvez ensuite vous enregistrer sur le hook onDestroy de cet objet. Cela vous permet d'exécuter du code de nettoyage spécifique lorsque l'objet est détruit.

Voici un exemple pour illustrer son utilisation :

import { Injectable, DestroyRef } from '@angular/core';

@Injectable(...)
export class AppService {
  destroyRef = inject(DestroyRef);

  destroy() {
    this.destroyRef.onDestroy(() => /* effectuer le nettoyage */ );
  }
}

import { Injectable, DestroyRef } from '@angular/core';

@Injectable(...)
export class AppService {
  destroyRef = inject(DestroyRef);

  destroy() {
    this.destroyRef.onDestroy(() => /* effectuer le nettoyage */ );
  }
}