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