What is the difference between ViewChild and ContentChild in Angular?

Expected Interview Answer

Step-by-Step Explanation

1. Step 1

   Identify where the element lives

   Decide if the target is in your own template (view) or projected from a parent via ng-content (content).

2. Step 2

   Pick the decorator

   Use @ViewChild for view elements and @ContentChild for projected content; add { static: false } or true as needed.

3. Step 3

   Declare the query

   Add a property like @ViewChild('ref') child, referencing a template variable, component, or directive.

4. Step 4

   Read in the right hook

   Access ViewChild in ngAfterViewInit and ContentChild in ngAfterContentInit, when each is resolved.

5. Step 5

   Use plural forms if needed

   Use @ViewChildren or @ContentChildren to get a QueryList of all matches instead of a single one.

Code Example

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-panel',
  template: '<input #box>'
})
export class PanelComponent implements AfterViewInit {
  @ViewChild('box') box!: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    this.box.nativeElement.focus();
  }
}

import { Component, ContentChild, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-tab',
  template: '<ng-content></ng-content>'
})
export class TabComponent implements AfterContentInit {
  @ContentChild('title') title: any;

  ngAfterContentInit() {
    console.log(this.title);
  }
}

Follow-up Questions

• In which lifecycle hooks are ViewChild and ContentChild available?
• What do ViewChildren and ContentChildren return?
• What does the { static: true } option change?
• Can ViewChild access a projected element? Why or why not?