decorator
Property decorator that configures a view query.
Use to get the QueryList
of elements or directives from the view DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.
View queries are set before the ngAfterViewInit
callback is called.
Metadata Properties:
QueryList#changes
observable will emit new values only if the QueryList result has changed. When false
the changes
observable might emit even if the QueryList has not changed. Note: * This config option is deprecated, it will be permanently set to true
and removed in future versions of Angular.The following selectors are supported.
@Component
or @Directive
decorator<my-component #cmp></my-component>
with @ViewChildren('cmp')
)@ViewChildren(SomeService) someService!: SomeService
)@ViewChildren('someToken') someTokenVal!: any
)TemplateRef
(e.g. query <ng-template></ng-template>
with @ViewChildren(TemplateRef) template;
)In addition, multiple string selectors can be separated with a comma (e.g. @ViewChildren('cmp1,cmp2')
)
The following values are supported by read
:
@Component
or @Directive
decoratorselector
of this query{provide: 'token', useValue: 'val'}
)TemplateRef
, ElementRef
, and ViewContainerRef
Further information is available in the Usage Notes...
import {AfterViewInit, Component, Directive, QueryList, ViewChildren} from '@angular/core'; @Directive({selector: 'child-directive'}) class ChildDirective { } @Component({selector: 'someCmp', templateUrl: 'someCmp.html'}) class SomeCmp implements AfterViewInit { @ViewChildren(ChildDirective) viewChildren!: QueryList<ChildDirective>; ngAfterViewInit() { // viewChildren is set } }
import {AfterViewInit, Component, Directive, Input, QueryList, ViewChildren} from '@angular/core'; @Directive({selector: 'pane'}) export class Pane { @Input() id!: string; } @Component({ selector: 'example-app', template: ` <pane id="1"></pane> <pane id="2"></pane> <pane id="3" *ngIf="shouldShow"></pane> <button (click)="show()">Show 3</button> <div>panes: {{serializedPanes}}</div> `, }) export class ViewChildrenComp implements AfterViewInit { @ViewChildren(Pane) panes!: QueryList<Pane>; serializedPanes: string = ''; shouldShow = false; show() { this.shouldShow = true; } ngAfterViewInit() { this.calculateSerializedPanes(); this.panes.changes.subscribe((r) => { this.calculateSerializedPanes(); }); } calculateSerializedPanes() { setTimeout(() => { this.serializedPanes = this.panes.map(p => p.id).join(', '); }, 0); } }
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/core/ViewChildren