@ContentChildren
You can use ContentChildren
to get the QueryList
of elements or directives from the content 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.
Content queries are set before the ngAfterContentInit
callback is called.
Example
Here is a simple demonstration of how the ContentChildren decorator can be used.
import {AfterContentInit, ContentChildren, Directive, QueryList} from '@angular/core';
@Directive({selector: 'child-directive'})
class ChildDirective {
}
@Directive({selector: 'someDir'})
class SomeDir implements AfterContentInit {
@ContentChildren(ChildDirective) contentChildren: QueryList<ChildDirective>;
ngAfterContentInit() {
// contentChildren is set
}
}
Links & Tutorials
Options
@ContentChildren(
selector: Type<any>|Function|string,
opts?: {descendants?: boolean, read?: any},
)
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?: {descendants?: boolean, read?: any}
Additional options.
descendants
- include only direct children or all descendants.read
- read a different token from the queried elements.