@angular/core

ContentChild

decorator

Property decorator that configures a content query.

API

  
    @ContentChild ({})

descendants

boolean

emitDistinctChangesOnly

boolean

first

boolean

read

any

isViewQuery

boolean

selector

any

static

boolean | undefined

Description

Property decorator that configures a content query.

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.

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.
descendants - If true (default) include all descendants of the element. If false then only query direct children of the element.
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

Difference between dynamic and static queries:

Queries	Details
Dynamic queries (`static: false`)	The query resolves before the `ngAfterContentInit()`
callback is called. The result will be updated for changes to your view, such as changes to
`ngIf` and `ngFor` blocks.
the view has been created, but before change detection runs (before the `ngOnInit()` callback
is called). The result, though, will never be updated to reflect changes to your view, such as
changes to `ngIf` and `ngFor` blocks.

Usage Notes

          import {AfterContentInit, ContentChild, Directive} from '@angular/core';@Directive({  selector: 'child-directive',  standalone: false,})class ChildDirective {}@Directive({  selector: 'someDir',  standalone: false,})class SomeDir implements AfterContentInit {  @ContentChild(ChildDirective) contentChild!: ChildDirective;  ngAfterContentInit() {    // contentChild is set  }}

Example

          import {Component, ContentChild, Directive, Input} from '@angular/core';@Directive({  selector: 'pane',  standalone: false,})export class Pane {  @Input() id!: string;}@Component({  selector: 'tab',  template: ` <div>pane: {{ pane?.id }}</div>`,  standalone: false,})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>  `,  standalone: false,})export class ContentChildComp {  shouldShow = true;  toggle() {    this.shouldShow = !this.shouldShow;  }}