Angular
Composants Multiples

Commander une armée d'Enfants

Dans la leçon précédente, on a récupéré plusieurs balises HTML. Mais si on a une boucle @for qui crée plein de Composants enfants, comment les récupérer tous pour appeler leurs méthodes internes ? En demandant à viewChildren() de chercher une classe TypeScript !

Le Général (Parent)
Transmet un ordre global à tous les sous-composants.
L'armée d'Enfants (Boucle @for)
Alice DUPONT
alice@defense.com
Statut : En attente d'ordres
Bob MARTIN
bob@defense.com
Statut : En attente d'ordres

Chercher par type de Composant

Au lieu de donner le nom d'un hashtag ('monId') à viewChildren(), on peut lui donner directement le nom de la classe du composant qu'on cherche : viewChildren(MonComposantEnfant).

L'avantage magique

Puisqu'Angular sait que vous cherchez des composants, la liste récupérée contient directement les objets TypeScript de ces enfants. Vous pouvez faire enfant.saMethode() sur chaque élément du tableau !

Le Code Source Complet

import { Component, viewChildren } from '@angular/core';
import { EnfantComponent } from './enfant.component';

@Component({
  selector: 'app-parent',
  imports: [EnfantComponent],
  template: `
    <button (click)="donnerOrdre()">Alerte Générale</button>
    
    @for (u of users; track u.id) {
      <app-enfant [propsUser]="u"></app-enfant>
    }
  `
})
export class ParentComponent {
  users = [/* ... */];

  // On demande à Angular : "Trouve moi TOUS les EnfantComponent"
  robots = viewChildren(EnfantComponent);

  donnerOrdre() {
    // On boucle sur l'armée de robots
    this.robots().forEach((robot) => {
      // On déclenche leur fonction interne !
      robot.colorCardUser(); 
    });
  }
}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-enfant',
  template: `
    <div>Soldat {{ propsUser.firstname }}</div>
  `
})
export class EnfantComponent {
  @Input() propsUser: any;
  
  // Cette méthode peut être déclenchée par le Parent !
  colorCardUser() {
    console.log("Ordre reçu mon Général !");
  }
}