Comment utiliser @ViewChildren sur Angular ?

@ViewChildren est une décorateur Angular qui vous permet de récupérer une référence à un ou plusieurs éléments enfants de votre vue. Vous pouvez l'utiliser de cette manière:

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

@Component({
  selector: 'app-my-component',
  standalone: true,
  template: `
    <div #child1></div>
    <div #child2></div>
  `
})
export class MyComponent implements AfterViewInit {
  @ViewChildren('child1, child2') children!: QueryList<ElementRef>;

  ngAfterViewInit() {
    console.log(this.children); // QueryList containing the two div elements
  }
}

Dans cet exemple, nous avons utilisé @ViewChildren pour récupérer une référence aux deux div enfants de la vue. Le décorateur prend en paramètre une chaîne qui correspond aux noms des éléments cibles. Dans notre cas, nous avons utilisé des noms d'éléments, mais vous pouvez également utiliser des selecteurs de classes ou d'autres types de sélecteurs.

Le décorateur renvoie une instance de QueryList, qui est une classe Angular qui représente une liste d'objets pouvant être observés. Vous pouvez utiliser les méthodes de QueryList pour itérer sur les éléments de la liste ou pour vous abonner aux changements de la liste.

WARNING

Il est important de noter que @ViewChildren ne sera disponible que lorsque la vue a été initialisée. Vous devrez donc attendre que le cycle de vie ngAfterViewInit soit appelé pour accéder aux éléments enfants.

QueryList

QueryList est une classe utilisée par Angular pour représenter une liste d'objets pouvant être observés. Elle est utilisée principalement avec les décorateurs de requête tels que @ViewChildren et @ContentChildren, qui permettent de récupérer une référence à des éléments enfants d'un composant ou d'une vue.

QueryList possède plusieurs méthodes utiles pour itérer sur les éléments de la liste et pour s'abonner aux changements de la liste. Par exemple, vous pouvez utiliser .forEach() pour itérer sur chaque élément de la liste, ou .changes pour s'abonner aux changements de la liste. Vous pouvez également utiliser la propriété .length pour obtenir le nombre d'éléments dans la liste.

Voici un exemple qui montre comment utiliser QueryList pour itérer sur chaque élément de la liste et afficher leur contenu:

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

@Component({
  selector: 'app-my-component',
  standalone: true,
  template: `
    <div #child1>Content of child 1</div>
    <div #child2>Content of child 2</div>
  `
})
export class MyComponent implements AfterViewInit {
  @ViewChildren('child1, child2') children!: QueryList<ElementRef>;

  ngAfterViewInit() {
    this.children.forEach((child) => {
      console.log(child.nativeElement.textContent);
    });
  }
}

Dans cet exemple, ngAfterViewInit est appelé une fois que la vue a été initialisée, et nous utilisons forEach pour itérer sur chaque élément de la liste children et afficher leur contenu.