Property decorator that configures a content query.

See more...

Description

Use 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.

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:

• selector - The directive type or the name used for querying.
• read - Used to read a different token from the queried element.
• static - True to resolve query results before change detection runs, false to resolve after change detection. Defaults to false.

The following selectors are supported.

• Any class with the @Component or @Directive decorator
• A template reference variable as a string (e.g. query <my-component #cmp></my-component> with @ContentChild('cmp'))
• Any provider defined in the child component tree of the current component (e.g. @ContentChild(SomeService) someService: SomeService)
• Any provider defined through a string token (e.g. @ContentChild('someToken') someTokenVal: any)
• A TemplateRef (e.g. query <ng-template></ng-template> with @ContentChild(TemplateRef) template;)

The following values are supported by read:

• Any class with the @Component or @Directive decorator
• Any provider defined on the injector of the component that is matched by the selector of this query
• Any provider defined through a string token (e.g. {provide: 'token', useValue: 'val'})
• TemplateRef, ElementRef, and ViewContainerRef

Further information is available in the Usage Notes...

Options

Usage notes

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

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

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

  ngAfterContentInit() {
    // contentChild is set
  }
}

Example

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

@Directive({selector: 'pane'})
export class Pane {
  @Input() id!: string;
}

@Component({
  selector: 'tab',
  template: `
    <div>pane: {{pane?.id}}</div>
  `
})
export class Tab {
  @ContentChild(Pane) pane!: Pane;
}

@Component({
  selector: 'example-app',
  template: `
    <tab>
      <pane id="1" *ngIf="shouldShow"></pane>
      <pane id="2" *ngIf="!shouldShow"></pane>
    </tab>

    <button (click)="toggle()">Toggle</button>
  `,
})
export class ContentChildComp {
  shouldShow = true;

  toggle() {
    this.shouldShow = !this.shouldShow;
  }
}