📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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 :

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

@Component({
  selector: 'app-my-component',
  standalone: true,
  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 :

html
<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 :

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

@Injectable({
  providedIn: 'root'
})
export class AppService {
  destroyRef = inject(DestroyRef);

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

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !