@ViewChild decorator usage in Angular

Introduction

The @ViewChild decorator helps you get a reference to a part of your template inside your component code. This lets you work with that part directly, like changing its properties or calling its methods.

You want to change a button's text or style after the page loads.

You need to call a method on a child component from the parent component.

You want to focus an input box automatically when the page appears.

You want to read or change a DOM element's value or property in your component.

You want to listen to events or access properties of a template element.

Syntax

Angular

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

@Component({ ... })
export class MyComponent {
  @ViewChild('templateRefName') elementRef!: ElementRef;

  ngAfterViewInit() {
    // Use this.elementRef here
  }
}

The string inside @ViewChild('templateRefName') matches the template reference variable in your HTML.

You usually access the element inside ngAfterViewInit() lifecycle hook to ensure the view is ready.

Examples

Access a button element by its template reference and change its text.

Angular

@ViewChild('myButton') button!: ElementRef<HTMLButtonElement>;

ngAfterViewInit() {
  this.button.nativeElement.textContent = 'Clicked!';
}

Get a reference to a child component instance and call its method.

Angular

@ViewChild(ChildComponent) childComp!: ChildComponent;

ngAfterViewInit() {
  this.childComp.someMethod();
}

Focus an input box programmatically using @ViewChild.

Angular

@ViewChild('inputBox') input!: ElementRef<HTMLInputElement>;

focusInput() {
  this.input.nativeElement.focus();
}

Sample Program

This component uses @ViewChild to get references to a button and an input box. After the view loads, it changes the button text and focuses the input box automatically.

Angular

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

@Component({
  selector: 'app-root',
  template: `
    <button #myBtn>Click me</button>
    <input #myInput type="text" placeholder="Type here" />
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild('myBtn') button!: ElementRef<HTMLButtonElement>;
  @ViewChild('myInput') input!: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    this.button.nativeElement.textContent = 'Ready to click';
    this.input.nativeElement.focus();
  }
}

Important Notes

Always use ngAfterViewInit to access @ViewChild elements because the view is not ready in the constructor or ngOnInit.

If the element or component might not exist, use the { static: false } option (default) to avoid errors.

You can also use @ViewChild with a component class to get its instance, not just DOM elements.

Summary

@ViewChild lets you get a direct reference to a template element or child component.

Use it to change element properties, call child methods, or control focus.

Access the reference safely inside ngAfterViewInit lifecycle hook.