ContentChildren

decorator

Configures a content query.

Description

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.

Metadata Properties:

selector - the directive type or the name used for querying.
descendants - include only direct children or all descendants.
read - read a different token from the queried elements.

Options

Usage notes

Basic 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 {
  // TODO(issue/24571): remove '!'.
  @ContentChildren(ChildDirective) contentChildren !: QueryList<ChildDirective>;
 
  ngAfterContentInit() {
    // contentChildren is set
  }
}

Tab-pane Example

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 {
  // TODO(issue/24571): remove '!'.
  @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; }
}