67. Utilisation de variables de référence locales pour l'interaction

Nous avons déjà vu les variables de référence locales (#input) sur les éléments du DOM. Elles peuvent aussi être utilisées pour référencer directement des instances de composants enfants dans le template du parent, permettant à ce dernier d'appeler des méthodes publiques de l'enfant.

Scénario : Le Parent appelle une méthode de l'Enfant

Imaginons qu'un VideoPlayerComponent (enfant) possède une méthode publique play() que le VideoDashboardComponent (parent) souhaite déclencher via un bouton.

1. Définir une méthode publique dans l'Enfant

typescript // video-player.component.ts (Enfant) export class VideoPlayerComponent { isPlaying: boolean = false;

play(): void { this.isPlaying = true; console.log('Lecture vidéo...'); } }

2. Définir la référence et appeler la méthode dans le template Parent

Le template parent assigne une variable de référence à la balise du composant enfant, accédant ainsi à son instance.

html

<app-video-player #player>

<button (click)="player.play()"> Démarrer la vidéo

Statut vidéo : En cours

Quand utiliser ce pattern ?

Cette méthode est efficace pour appeler des actions impératives simples sur l'enfant (ex : reset(), focus(), open()). Pour passer des données ou pour une gestion d'état complexe, @Input/@Output ou les Services restent privilégiés.