What is the difference between ViewChild and ContentChild?

Question

Accepted Answer

Both query for references to child elements/components, but they look in **different places**: **`@ViewChild`** queries the component's *own template*, while **`@ContentChild`** queries content **projected into** the component via ``. ## @ViewChild — query your own 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` accesses elements/components that the component itself declares in its template — available in **`ngAfterViewInit`**. ## @ContentChild — query projected content ```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` accesses content the **parent passed in** (projected through ``) — available in **`ngAfterContentInit`**. ## The key distinction ```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) ``` ## Plural versions ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Modern signal queries ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Why it matters Distinguishing `@ViewChild` (your template) from `@ContentChild` (projected content) — and their respective lifecycle timings (`ngAfterViewInit` vs `ngAfterContentInit`) — is essential when building reusable components that need to interact with either their own template elements or the content consumers project into them. It's a common point of confusion and a frequent need when authoring component libraries, tabs, form controls, and wrappers that must coordinate with child elements.