How to Use @ViewChild in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
As the creator of CoreUI and with over 11 years of Angular development experience, I’ll show you how to effectively use the @ViewChild decorator to access child components and DOM elements.
The @ViewChild decorator allows you to access child components, directives, or DOM elements from the parent component, enabling direct manipulation and communication.
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'
// Child component
@Component({
selector: 'app-child',
template: `
<div>
<h3>Child Component</h3>
<p>Count: {{ count }}</p>
</div>
`
})
export class ChildComponent {
count = 0
increment() {
this.count++
}
reset() {
this.count = 0
}
}
// Parent component
@Component({
selector: 'app-parent',
template: `
<div>
<h2>Parent Component</h2>
<input #nameInput type="text" placeholder="Enter name">
<button (click)="focusInput()">Focus Input</button>
<app-child #childComponent></app-child>
<button (click)="incrementChild()">Increment Child</button>
<button (click)="resetChild()">Reset Child</button>
</div>
`
})
export class ParentComponent implements AfterViewInit {
// Access child component
@ViewChild('childComponent') childRef!: ChildComponent
// Access DOM element
@ViewChild('nameInput') nameInputRef!: ElementRef<HTMLInputElement>
// Access by component type
@ViewChild(ChildComponent) childByType!: ChildComponent
ngAfterViewInit() {
// ViewChild is available after view initialization
console.log('Child component:', this.childRef)
console.log('Input element:', this.nameInputRef.nativeElement)
}
incrementChild() {
this.childRef.increment()
}
resetChild() {
this.childRef.reset()
}
focusInput() {
this.nameInputRef.nativeElement.focus()
}
}
The @ViewChild decorator takes a selector (template reference variable, component type, or directive type) and returns the first matching element. Use template reference variables (#childComponent) for specific elements, component types for accessing any instance of that component, or directive types. ViewChild is available in ngAfterViewInit, not in ngOnInit. For multiple elements, use @ViewChildren instead of @ViewChild.
Best Practice Note:
In CoreUI components, we use @ViewChild extensively for accessing form controls, managing focus states, and integrating with third-party libraries. This approach provides precise control over component behavior while maintaining clean parent-child communication patterns essential for complex UI interactions.
