Angular
Accès DOM Multiple

La fonction viewChildren()

Et si vous aviez plusieurs balises avec le même identifiant local #maCible ? Plutôt que d'utiliser viewChild() qui n'attrape que la première, on utilise viewChildren(). Elle retourne un tableau réactif (un Signal) contenant toutes les cibles d'un coup ! L'équivalent de document.querySelectorAll().

Le Panneau de Contrôle Central

Un seul clic va parcourir toutes les cibles trouvées dans la page grâce à une boucle forEach.

Les Éléments Ciblés (#paragraph)
1
Premier Paragraphe cible
2
Deuxième Paragraphe cible
3
Troisième Paragraphe cible

La mécanique de groupe

  • 1. Plusieurs éléments, même identifiantDans le HTML, on place le même #paragraph sur plusieurs balises différentes.
  • 2. On les attrape tous au filetDans le TypeScript, cibles = viewChildren('paragraph') va tous les récupérer dans un tableau.
  • 3. La boucle forEachPour les modifier, il suffit de parcourir le tableau retourné avec this.cibles().forEach(element => ...)

Le Code Source Complet

view-children.component.ts
import { Component, viewChildren, ElementRef } from '@angular/core';

@Component({
  selector: 'app-test28',
  template: `
    <!-- Même #reference pour tout le monde -->
    <p #paragraph>Premier paragraphe</p>
    <p #paragraph>Deuxième paragraphe</p>
    <p #paragraph>Troisième paragraphe</p>
    
    <button (click)="highlightElements()">Colorier tout le monde</button>
  `
})
export class Test28Component {
  // Récupère un tableau réactif (Signal) de tous les éléments #paragraph
  paragraphs = viewChildren<ElementRef>('paragraph');

  highlightElements() {
    // On appelle () pour lire le tableau, et on fait une boucle
    this.paragraphs().forEach((p) => {
      p.nativeElement.style.backgroundColor = 'yellow';
    });
  }
}