decorator
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.
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:
The following selectors are supported.
@Component
or @Directive
decorator<my-component #cmp></my-component>
with @ContentChild('cmp')
)@ContentChild(SomeService) someService: SomeService
)@ContentChild('someToken') someTokenVal: any
)TemplateRef
(e.g. query <ng-template></ng-template>
with @ContentChild(TemplateRef) template;
)The following values are supported by read
:
@Component
or @Directive
decoratorselector
of this query{provide: 'token', useValue: 'val'}
)TemplateRef
, ElementRef
, and ViewContainerRef
Further information is available in the 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 } }
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; } }
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/core/ContentChild