decorator
Parameter decorator that configures a content query.
Use 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.
Does not retrieve elements or directives that are in other components' templates, since a component's template is always a black box to its ancestors.
Metadata Properties:
true
include all descendants of the element. If false
then only query direct children of the element. 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...
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 } }
Here is a slightly more realistic example that shows how ContentChildren
decorators can be used to implement a tab pane component.
import {Component, ContentChildren, Directive, Input, QueryList} from '@angular/core'; @Directive({selector: 'pane'}) export class Pane { @Input() id!: string; } @Component({ selector: 'tab', template: ` <div class="top-level">Top level panes: {{serializedPanes}}</div> <div class="nested">Arbitrary nested panes: {{serializedNestedPanes}}</div> ` }) export class Tab { @ContentChildren(Pane) topLevelPanes!: QueryList<Pane>; @ContentChildren(Pane, {descendants: true}) arbitraryNestedPanes!: QueryList<Pane>; get serializedPanes(): string { return this.topLevelPanes ? this.topLevelPanes.map(p => p.id).join(', ') : ''; } get serializedNestedPanes(): string { return this.arbitraryNestedPanes ? this.arbitraryNestedPanes.map(p => p.id).join(', ') : ''; } } @Component({ selector: 'example-app', template: ` <tab> <pane id="1"></pane> <pane id="2"></pane> <pane id="3" *ngIf="shouldShow"> <tab> <pane id="3_1"></pane> <pane id="3_2"></pane> </tab> </pane> </tab> <button (click)="show()">Show 3</button> `, }) export class ContentChildrenComp { shouldShow = false; show() { this.shouldShow = true; } }
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/core/ContentChildren