`contentChild()`

Queries a single projected (ng-content) node as a signal.

Since Angular 17.2+ Spec ↗

Syntax

contentChild<T>(locator, options?) | contentChild.required<T>(locator, options?)

Parameters

Name	Type	Required	Description
`locator`	`string \| Type<T>`	No	Template reference name or type to find in projected content.
`options`	`object`	No	Supports descendants and read.

Returns

Signal<T | undefined> — Signal of the matched projected node.

Examples

import { Component, contentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-panel',
  standalone: true,
  template: `<ng-content />`,
})
export class PanelComponent {
  header = contentChild<TemplateRef<unknown>>('header');
}

Notes

contentChild queries nodes the parent projects into this component via ng-content, as opposed to viewChild which queries the component's own template. Use the descendants option to search nested projected content.