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

More Angular tasks

Back to the full Angular cheat sheet