Wat is het verschil tussen ViewChild en ContentChild?

Question

Accepted Answer

Beide vragen referenties naar onderliggende elementen/components op, maar kijken naar **verschillende locaties**: **`@ViewChild`** zoekt in de *eigen template* van de component, terwijl **`@ContentChild`** zoekt naar inhoud die **in** de component is **geprojecteerd** via ``. ## Waarom het belangrijk is Het onderscheiden van `@ViewChild` (uw template) van `@ContentChild` (geprojecteerde inhoud) — en hun respectievelijke lifecycle-timing (`ngAfterViewInit` vs `ngAfterContentInit`) — is essentieel bij het bouwen van herbruikbare componenten die moeten interageren met hun eigen template-elementen of de inhoud die consumers erin projecteren. Het is een veelvoorkomend verwarringsmoment en een frequent behoefte bij het schrijven van component-bibliotheken, tabbladen, formulierbesturingselementen en wrappers die moeten coördineren met onderliggende elementen. ## @ViewChild — uw eigen template opvragen ```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` geeft toegang tot elementen/componenten die de component zelf in zijn template declareert — beschikbaar in **`ngAfterViewInit`**. ## @ContentChild — geprojecteerde inhoud opvragen ```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` geeft toegang tot inhoud die de **bovenliggende component heeft doorgegeven** (geprojecteerd via ``) — beschikbaar in **`ngAfterContentInit`**. ## Het belangrijkste verschil ```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) ``` ## Meervoudige versies ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Moderne signal queries ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ```