Angular
Accès DOM

Piloter un Enfant avec viewChild()

Vous savez lier des variables avec @Input, mais comment faire si le parent veut ordonner à l'enfant d'exécuter une méthode précise (comme "Ferme la fenêtre !") ? On utilise viewChild() pour cibler l'enfant tout entier !

Le Parent (Pilote)

Ces boutons utilisent viewChild pour s'introduire dans l'enfant et déclencher ses fonctions internes.

Composant Enfant (Le Robot)
Il possède ses propres méthodes et éléments.
Je suis la boîte de l'enfant

L'accès total

En ciblant un composant plutôt qu'un <div>, le parent a accès à tout ce qui est public chez l'enfant : ses variables, ses méthodes, et même ses propres viewChild ! C'est très utile pour déclencher des actions impératives (ex: focus un input, reset un formulaire enfant).

Le Code Source Complet

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

@Component({
  selector: 'app-parent',
  imports: [EnfantComponent],
  template: `
    <button (click)="callChildMethod()">Pirater l'enfant</button>
    
    <!-- On cible directement la balise du composant -->
    <app-enfant #monPetitRobot></app-enfant>
  `
})
export class ParentComponent {
  // On récupère le composant entier !
  childComponent = viewChild<EnfantComponent>('monPetitRobot');

  callChildMethod() {
    const robot = this.childComponent(); // On lit le signal
    if (robot) {
      // On exécute la méthode interne du robot depuis le parent !
      robot.showAlert(); 
    }
  }
}
import { Component } from '@angular/core';

@Component({
  selector: 'app-enfant',
  template: `
    <div>Je suis le robot</div>
  `
})
export class EnfantComponent {
  
  // Une méthode publique normale
  showAlert() {
    alert('Bip bop ! Le parent a appuyé sur mon bouton interne !');
  }

}