📢 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 ngAfterViewChecked dans Angular ? ​

ngAfterViewChecked est un hook de cycle de vie Angular qui est appelé chaque fois que le change detection des vues du composant et de ses enfants a été effectué. Vous pouvez l'utiliser pour effectuer des tâches qui dépendent de l'état des vues du composant.

Voici un exemple de composant qui utilise ngAfterViewChecked :

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

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

  ngAfterViewChecked() {
    console.log('Les vues du composant ont été vérifiées !');
  }
}

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

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

Chaque fois que le change detection du composant sera effectué, la méthode ngAfterViewChecked sera appelée et le message "Les vues du composant ont été vérifiées !" sera affiché dans la console.

TIP

Notez que le change detection se produit automatiquement dans Angular lorsque les données du modèle sont mises à jour, mais vous pouvez également déclencher manuellement le change detection en utilisant ChangeDetectorRef.detectChanges().

Exemple: TodoList ​

Voici un exemple d'utilisation de ngAfterViewChecked dans un composant Angular qui affiche une liste de tâches à faire :

ts
import { Component, AfterViewChecked, ViewChildren, QueryList, ElementRef } from '@angular/core';

interface Todo {
  title: string;
  completed: boolean;
}

@Component({
  selector: 'app-todo-list',
  standalone: true,
  template: `
    <h1>Ma liste de tâches à faire</h1>
    <ul>
      @for (todo of todos ; track $index) {
        <li>
          <input type="checkbox" [(ngModel)]="todo.completed">
          {{ todo.title }}
        </li>
      }
    </ul>
  `,
})
export class TodoListComponent implements AfterViewChecked {
  todos: Todo[] = [
    { title: 'Acheter du pain', completed: false },
    { title: 'Faire du sport', completed: true },
    { title: 'Envoyer un mail', completed: false },
  ];

  @ViewChildren('todos', { read: ElementRef }) todoElements!: QueryList<ElementRef>;

  ngAfterViewChecked() {
    console.log(`Il y a ${this.todoElements.length} éléments de tâches dans la liste.`);
  }
}

Dans cet exemple, la méthode ngAfterViewChecked est utilisée pour afficher le nombre d'éléments de tâches dans la liste dans la console chaque fois que le change detection de la vue du composant est effectué.

Il y a plusieurs raisons pour lesquelles vous pourriez vouloir utiliser ngAfterViewChecked dans ce cas :

  • Si vous utilisez @for pour afficher une liste de donnĂ©es qui peut ĂŞtre mise Ă  jour dynamiquement (par exemple en ajoutant ou en supprimant des Ă©lĂ©ments de la liste), vous pouvez utiliser ngAfterViewChecked pour effectuer des tâches qui dĂ©pendent de l'Ă©tat de la liste (comme afficher le nombre d'Ă©lĂ©ments de la liste).

  • Si vous utilisez des Ă©lĂ©ments de formulaire (comme des checkboxes) dans votre template, vous pouvez utiliser ngAfterViewChecked pour effectuer des tâches qui dĂ©pendent de l'Ă©tat de ces Ă©lĂ©ments (comme valider un formulaire ou afficher des erreurs de validation).

  • Si vous utilisez des composants enfants dans votre template et que vous voulez effectuer des tâches qui dĂ©pendent de leur Ă©tat une fois qu'ils ont Ă©tĂ© initialisĂ©s et affichĂ©s, vous pouvez utiliser ngAfterViewChecked pour attendre que les vues de ces composants enfants soient vĂ©rifiĂ©es.

WARNING

Notez que ngAfterViewChecked est appelé chaque fois que le change detection des vues du composant et de ses enfants est effectué, il est donc important de s'assurer que votre code dans cette méthode est performant et ne prend pas trop de temps à s'exécuter.

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