68. ViewChild et ContentChild
Lorsqu'un composant a besoin d'un accès programmatique à des éléments ou composants rendus dans sa propre vue (DOM local) ou à du contenu projeté (ng-content), nous utilisons @ViewChild et @ContentChild.
1. @ViewChild (Accès à la vue locale)
@ViewChild est utilisé par un composant pour récupérer une référence à un élément DOM ou un composant/directive rendu dans son propre template.
Cas d'usage : Mettre le focus sur un input, accéder à une méthode d'un composant enfant à l'intérieur du template actuel.
typescript // parent.component.ts import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';
export class ParentComponent implements AfterViewInit {
// 1. Sélectionner l'élément DOM marqué avec #nameInput @ViewChild('nameInput') nameInputRef: ElementRef | undefined;
// 2. L'accès n'est possible qu'après ngAfterViewInit ngAfterViewInit(): void { if (this.nameInputRef) { // Accès à l'élément DOM natif et appel de focus() this.nameInputRef.nativeElement.focus(); } } }
html
<input type="text" #nameInput>
2. @ContentChild (Accès au contenu projeté)
@ContentChild permet de récupérer une référence à un élément ou composant passé via la projection de contenu (<ng-content>).
Cas d'usage : Un composant conteneur doit savoir si un élément projeté spécifique (comme un header obligatoire) est présent.
typescript
// container.component.ts (Le composant qui a
export class ContainerComponent implements AfterContentInit {
// Cherche l'élément avec la classe CSS .header-title dans le contenu projeté @ContentChild('.header-title') headerRef: ElementRef | undefined;
ngAfterContentInit(): void { console.log('Header projeté trouvé ?', !!this.headerRef); } }
Différence clé de timing : @ContentChild est disponible dans ngAfterContentInit. @ViewChild est disponible dans ngAfterViewInit.