Help Angular by taking a 1 minute survey!Go to surveyHome
API > @angular/core

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

View queries are set before the ngAfterViewInit callback is called.

Metadata Properties:

  • selector - the directive type or the name used for querying.
  • read - read a different token from the queried elements.
  • static - whether or not to resolve query results before change detection runs (i.e. return static results only). If this option is not provided, the compiler will fall back to its default behavior, which is to use query results to determine the timing of query resolution. If any query results are inside a nested view (e.g. *ngIf), the query will be resolved after change detection runs. Otherwise, it will be resolved before change detection runs.

Supported selectors include:

  • 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;)

Options

Usage notes

import {Component, Directive, Input, ViewChild} from '@angular/core'; @Directive({selector: 'pane'}) export class Pane { // TODO(issue/24571): remove '!'. @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; } } 
      
      
  1. import {Component, Directive, Input, ViewChild} from '@angular/core';
  2.  
  3. @Directive({selector: 'pane'})
  4. export class Pane {
  5.   // TODO(issue/24571): remove '!'.
  6.   @Input() id !: string;
  7. }
  8.  
  9. @Component({
  10.   selector: 'example-app',
  11.   template: `
  12.     <pane id="1" *ngIf="shouldShow"></pane>
  13.     <pane id="2" *ngIf="!shouldShow"></pane>
  14.     
  15.     <button (click)="toggle()">Toggle</button>
  16.        
  17.     <div>Selected: {{selectedPane}}</div> 
  18.   `,
  19. })
  20. export class ViewChildComp {
  21.   @ViewChild(Pane)
  22.   set pane(v: Pane) {
  23.     setTimeout(() => { this.selectedPane = v.id; }, 0);
  24.   }
  25.   selectedPane: string = '';
  26.   shouldShow = true;
  27.   toggle() { this.shouldShow = !this.shouldShow; }
  28. }

Example

import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core'; @Directive({selector: 'child-directive'}) class ChildDirective { } @Component({selector: 'someCmp', templateUrl: 'someCmp.html'}) class SomeCmp implements AfterViewInit { // TODO(issue/24571): remove '!'. @ViewChild(ChildDirective) child !: ChildDirective; ngAfterViewInit() { // child is set } } 
      
      
  1. import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core';
  2.  
  3. @Directive({selector: 'child-directive'})
  4. class ChildDirective {
  5. }
  6.  
  7. @Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
  8. class SomeCmp implements AfterViewInit {
  9.   // TODO(issue/24571): remove '!'.
  10.   @ViewChild(ChildDirective) child !: ChildDirective;
  11.  
  12.   ngAfterViewInit() {
  13.     // child is set
  14.   }
  15. }

Example

import {Component, Directive, Input, ViewChild} from '@angular/core'; @Directive({selector: 'pane'}) export class Pane { // TODO(issue/24571): remove '!'. @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; } } 
      
      
  1. import {Component, Directive, Input, ViewChild} from '@angular/core';
  2.  
  3. @Directive({selector: 'pane'})
  4. export class Pane {
  5.   // TODO(issue/24571): remove '!'.
  6.   @Input() id !: string;
  7. }
  8.  
  9. @Component({
  10.   selector: 'example-app',
  11.   template: `
  12.     <pane id="1" *ngIf="shouldShow"></pane>
  13.     <pane id="2" *ngIf="!shouldShow"></pane>
  14.     
  15.     <button (click)="toggle()">Toggle</button>
  16.        
  17.     <div>Selected: {{selectedPane}}</div> 
  18.   `,
  19. })
  20. export class ViewChildComp {
  21.   @ViewChild(Pane)
  22.   set pane(v: Pane) {
  23.     setTimeout(() => { this.selectedPane = v.id; }, 0);
  24.   }
  25.   selectedPane: string = '';
  26.   shouldShow = true;
  27.   toggle() { this.shouldShow = !this.shouldShow; }
  28. }