Angular 10 References/ Core
References

@ContentChild

You can use ContentChild to get the first element or the directive matching the selector from the content DOM. If the content DOM changes, and a new child matches the selector, the property will be updated.

Content queries are set before the ngAfterContentInit callback is called.

Example

import {AfterContentInit, ContentChild, Directive} from '@angular/core';

@Directive({selector: 'child-directive'})
class ChildDirective {
}

@Directive({selector: 'someDir'})
class SomeDir implements AfterContentInit {
  @ContentChild(ChildDirective, {static: true}) contentChild: ChildDirective;

  ngAfterContentInit() {
    // contentChild is set
  }
}

Options

@ContentChild(
  selector: Type<any>|Function|string, 
  opts?: {read?: any, static: boolean},
)

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 `` 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 `` with `@ViewChild(TemplateRef) template;`)

opts#

opts?: {read?: any}
Additional options. * `read` - read a different token from the queried element. * `static` - `true` to resolve query results before change detection runs, `false` to resolve after change detection.
Links & Tutorials