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 comment utiliser ngAfterViewChecked dans votre composant Angular :

Importez l'interface AfterViewChecked dans votre composant :

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

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

Faites en sorte que votre composant implémente l'interface AfterViewChecked :

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

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

Implémentez la méthode ngAfterViewChecked dans votre composant :

ngAfterViewChecked() {
  // Cette méthode sera appelée chaque fois que le change detection des vues du composant et de ses enfants
  // a été effectué. Vous pouvez y mettre votre code ici.
}

ngAfterViewChecked() {
  // Cette méthode sera appelée chaque fois que le change detection des vues du composant et de ses enfants
  // a été effectué. Vous pouvez y mettre votre code ici.
}

Voici un exemple de composant qui utilise ngAfterViewChecked :

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

@Component({
  selector: 'app-my-component',
  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 !');
  }
}

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

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

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

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

@Component({
  selector: 'app-todo-list',
  template: `
    <h1>Ma liste de tâches à faire</h1>
    <ul>
      <li *ngFor="let todo of todos">
        <input type="checkbox" [(ngModel)]="todo.completed">
        {{ todo.title }}
      </li>
    </ul>
  `,
})
export class TodoListComponent implements AfterViewChecked {
  todos = [
    { 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.`);
  }
}

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

@Component({
  selector: 'app-todo-list',
  template: `
    <h1>Ma liste de tâches à faire</h1>
    <ul>
      <li *ngFor="let todo of todos">
        <input type="checkbox" [(ngModel)]="todo.completed">
        {{ todo.title }}
      </li>
    </ul>
  `,
})
export class TodoListComponent implements AfterViewChecked {
  todos = [
    { 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 la directive *ngFor 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.

Comment utiliser ngAfterViewChecked dans Angular ? ​

Exemple: TodoList ​

Comment utiliser ngAfterViewChecked dans Angular ?

Exemple: TodoList