decorator
Parameter 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. The default value will change from false
to true
in v12. When false
the changes
observable might emit even if the QueryList has not changed.Further information 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://v11.angular.io/api/core/ViewChildren