References
Oleksa Novyk | GitHub

@ContentChildren

This is the documentation for Angular 6.
You can switch to the latest version Angular 9.

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.