Angular 9 References/ Core


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

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.


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


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


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?: {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