@angular/core

ContentChild

decorator

Property decorator that configures a content query.

  
    @ContentChild ({})

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.

Example

descendants

boolean

emitDistinctChangesOnly

boolean

first

boolean

read

any

isViewQuery

boolean

selector

any

static

boolean

Aug	SEP	Oct
	20
2023	2024	2025