@angular/core

contentChildren

Initializer API

stablesince v19.0

Initializes a content children query.

Query results are represented as a signal of a read-only collection containing all matched elements.

Referencing component children with queries Content queries

API

    
      function contentChildren<LocatorT>(locator, opts?);function contentChildren<LocatorT, ReadT>(locator, opts);

function contentChildren<LocatorT>(locator: string | ProviderToken<LocatorT>, opts?: { descendants?: boolean | undefined; read?: undefined; debugName?: string | undefined; } | undefined): Signal<readonly LocatorT[]>;

@paramlocatorstring | ProviderToken<LocatorT>

@paramopts{ descendants?: boolean | undefined; read?: undefined; debugName?: string | undefined; } | undefined

@returnsSignal<readonly LocatorT[]>

function contentChildren<LocatorT, ReadT>(locator: string | ProviderToken<LocatorT>, opts: { descendants?: boolean | undefined; read: ProviderToken<ReadT>; debugName?: string | undefined; }): Signal<readonly ReadT[]>;

@paramlocatorstring | ProviderToken<LocatorT>

@paramopts{ descendants?: boolean | undefined; read: ProviderToken<ReadT>; debugName?: string | undefined; }

@returnsSignal<readonly ReadT[]>

Usage Notes

Create a children query in your component by declaring a class field and initializing it with the contentChildren() function.

@Component({...})
export class TestComponent {
  headerEl = contentChildren<ElementRef>('h');   // Signal<ReadonlyArray<ElementRef>>
}

Note: By default descendants is false which means the query will not traverse all descendants in the same template.

contentChildren

On this page

API

Usage Notes

Social Media

Community

Resources

Community translations