@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.
View queries are set before the ngAfterViewInit callback is called.
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 {
@ViewChild(ChildDirective, {static: true}) child: ChildDirective;
ngAfterViewInit() {
// child is set
}
}
Options
@ViewChild(
selector: Type<any>|Function|string,
opts?: {read?: any, static: boolean},
)
selector
#
selector: Type<any>|Function|string
The directive type or the name used for querying.
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;
)
opts
#
opts?: {read?: any}
Additional options.
read
- read a different token from the queried elements.static
-true
to resolve query results before change detection runs.
Links & Tutorials