`@ViewChild`

Queries a single child element or directive from the component view.

Since Angular 2+ Spec ↗

Syntax

@ViewChild(selector, options?) propertyName: T

Parameters

Name	Type	Required	Description
`selector`	`string \| Type<T>`	No	Template reference name or component/directive type.
`options`	`object`	No	Supports read and static.

Returns

PropertyDecorator — Decorator assigning the matched query to the property.

Examples

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

@Component({
  selector: 'app-input',
  standalone: true,
  template: `<input #field />`,
})
export class InputComponent implements AfterViewInit {
  @ViewChild('field') field!: ElementRef<HTMLInputElement>;
  ngAfterViewInit() {
    this.field.nativeElement.focus();
  }
}

Notes

The decorator result is available in ngAfterViewInit (or ngOnInit when `static: true`). New code should prefer the signal-based viewChild() which removes timing concerns. Use `read` to obtain a specific token from the matched node.