Quelle est la différence entre ViewChild et ContentChild ?

Question

Accepted Answer

Les deux interrogent des références à des éléments/composants enfants, mais ils regardent à **des endroits différents** : **`@ViewChild`** interroge le *template du composant lui-même*, tandis que **`@ContentChild`** interroge le contenu **projeté dans** le composant via ``. ## @ViewChild — interroger votre propre template ```ts @Component({ template: ` `, }) export class ParentComponent implements AfterViewInit { @ViewChild("nameInput") input!: ElementRef; // by template ref @ViewChild(ChildComponent) child!: ChildComponent; // by component type ngAfterViewInit() { this.input.nativeElement.focus(); // available after the VIEW initializes this.child.doSomething(); // call a child component's method } } ``` `@ViewChild` accède aux éléments/composants que le composant lui-même déclare dans son template — disponibles dans **`ngAfterViewInit`**. ## @ContentChild — interroger le contenu projeté ```ts @Component({ selector: "app-card", template: `

`, // content projected here }) export class CardComponent implements AfterContentInit { @ContentChild(CardTitleComponent) title!: CardTitleComponent; ngAfterContentInit() { // the projected content is ready here (EARLIER than ngAfterViewInit) console.log(this.title); } } ``` ```html

Hello

``` `@ContentChild` accède au contenu que le **parent a transmis** (projeté via ``) — disponible dans **`ngAfterContentInit`**. ## La distinction clé ```text @ViewChild → elements in THIS component's own template → ngAfterViewInit @ContentChild → elements PROJECTED in from the parent → ngAfterContentInit (plural: @ViewChildren / @ContentChildren return a QueryList of all matches) ``` ## Versions au pluriel ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Requêtes modernes par signaux ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Pourquoi c'est important Distinguer `@ViewChild` (votre template) de `@ContentChild` (contenu projeté) — et leurs calendriers de cycle de vie respectifs (`ngAfterViewInit` vs `ngAfterContentInit`) — est essentiel lors de la création de composants réutilisables qui doivent interagir soit avec leurs propres éléments de template, soit avec le contenu que les consommateurs projettent dedans. C'est un point de confusion courant et un besoin fréquent lors de la création de bibliothèques de composants, d'onglets, de contrôles de formulaire et d'enveloppes qui doivent se coordonner avec des éléments enfants.