ViewChild & ContentChild in Angular

From the Angular cheat sheet · Components · verified Jul 2026

ViewChild & ContentChild

Accessing child components and elements

typescript
// ViewChild - Access child in template
@Component({
  selector: 'app-parent',
  template: \`
    <app-child #childRef></app-child>
    <button (click)="callChildMethod()">Call Child</button>
  \`
})
export class ParentComponent {
  @ViewChild('childRef') child: ChildComponent;
  @ViewChild(ChildComponent) childByType: ChildComponent;

  callChildMethod() {
    this.child.doSomething();
  }
}
💡 Use static: true for ViewChild if you need it in ngOnInit
⚡ ViewChildren returns a QueryList that updates automatically
📌 ContentChild queries projected content from ng-content
🔥 Access child components after ngAfterViewInit lifecycle hook

Continue with Angular

Save the full cheat sheet or work through every related task.

More Angular tasks

Back to the full Angular cheat sheet