Angular ViewChildren

decorator

Parameter decorator that configures a view query.

See more...

Description

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:

• selector - The directive type or the name used for querying.
• read - Used to read a different token from the queried elements.
• emitDistinctChangesOnly - The 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.

Further information available in the Usage Notes...

Options

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   } }

Another example

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