Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

ViewChild

Property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes, and a new child matches the selector, the property is updated.

See more...

Description

Metadata Properties:

  • selector - The directive type or the name used for querying.
  • read - Used to read a different token from the queried elements.
  • static - true to resolve query results before change detection runs, false to resolve after change detection. Defaults to false.

The following selectors are supported.

  • Any class with the @Component or @Directive decorator
  • A template reference variable as a string (e.g. query <my-component #cmp></my-component> with @ViewChild('cmp'))
  • Any provider defined in the child component tree of the current component (e.g. @ViewChild(SomeService) someService: SomeService)
  • Any provider defined through a string token (e.g. @ViewChild('someToken') someTokenVal: any)
  • A TemplateRef (e.g. query <ng-template></ng-template> with @ViewChild(TemplateRef) template;)

The following values are supported by read:

  • Any class with the @Component or @Directive decorator
  • Any provider defined on the injector of the component that is matched by the selector of this query
  • Any provider defined through a string token (e.g. {provide: 'token', useValue: 'val'})
  • TemplateRef, ElementRef, and ViewContainerRef

Difference between dynamic and static queries:

  • Dynamic queries (static: false) - The query resolves before the ngAfterViewInit() callback is called. The result will be updated for changes to your view, such as changes to ngIf and ngFor blocks.
  • Static queries (static: true) - The query resolves once the view has been created, but before change detection runs (before the ngOnInit() callback is called). The result, though, will never be updated to reflect changes to your view, such as changes to ngIf and ngFor blocks.

Further information is available in the Usage Notes...

Options

Usage notes

Example 1

      
      import {Component, Directive, Input, ViewChild} from '@angular/core';

@Directive({selector: 'pane'})
export class Pane {
  @Input() id!: string;
}

@Component({
  selector: 'example-app',
  template: `
    <pane id="1" *ngIf="shouldShow"></pane>
    <pane id="2" *ngIf="!shouldShow"></pane>

    <button (click)="toggle()">Toggle</button>

    <div>Selected: {{ selectedPane }}</div>
  `,
})
export class ViewChildComp {
  @ViewChild(Pane)
  set pane(v: Pane) {
    setTimeout(() => {
      this.selectedPane = v.id;
    }, 0);
  }
  selectedPane: string = '';
  shouldShow = true;
  toggle() {
    this.shouldShow = !this.shouldShow;
  }
}
    

Example 2

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

@Directive({selector: 'child-directive'})
class ChildDirective {}

@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
class SomeCmp implements AfterViewInit {
  @ViewChild(ChildDirective) child!: ChildDirective;

  ngAfterViewInit() {
    // child is set
  }
}