`contentChildren()`

Queries all projected (ng-content) nodes as a signal array.

Since Angular 17.2+ Spec ↗

Syntax

contentChildren<T>(locator, options?): Signal<ReadonlyArray<T>>

Parameters

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

Returns

Signal<ReadonlyArray<T>> — Signal holding all matched projected nodes.

Examples

import { Component, contentChildren } from '@angular/core';
import { TabComponent } from './tab.component';

@Component({
  selector: 'app-tabs',
  standalone: true,
  template: `<ng-content />`,
})
export class TabsComponent {
  tabs = contentChildren(TabComponent);
}

Notes

Returns a signal updated as projected children change. By default only direct projected children are matched; pass `{ descendants: true }` to include nested ones. Commonly used for compound components like tabs or accordions.