@angular/core

ViewChildren

decorator

Property decorator that configures a view query.

  
    class ViewChildren {}

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:

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.

The following selectors are supported.

Any class with the @Component or @Directive decorator
A template reference variable as a string (e.g. query <my-component #cmp></my-component> with @ViewChildren('cmp'))
Any provider defined in the child component tree of the current component (e.g. @ViewChildren(SomeService) someService!: SomeService)
Any provider defined through a string token (e.g. @ViewChildren('someToken') someTokenVal!: any)
A 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:

Another example

descendants

boolean

emitDistinctChangesOnly

boolean

first

boolean

read

any

isViewQuery

boolean

selector

any

static

boolean