`viewChildren()`

Queries all matching elements or directives from the view as a signal array.

Since Angular 17.2+ Spec ↗

Syntax

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

Parameters

Name	Type	Required	Description
`locator`	`string \| Type<T>`	No	Template reference name or component/directive type to match.
`options`	`object`	No	Supports read to select a specific token.

Returns

Signal<ReadonlyArray<T>> — Signal holding all matched results in document order.

Examples

import { Component, viewChildren } from '@angular/core';
import { ItemComponent } from './item.component';

@Component({
  selector: 'app-list',
  standalone: true,
  imports: [ItemComponent],
  template: `@for (i of ids; track i) { <app-item /> }`,
})
export class ListComponent {
  ids = [1, 2, 3];
  items = viewChildren(ItemComponent);
}

Notes

Returns a signal that updates whenever the set of matching view children changes. The array is read-only and ordered by appearance. Pair with computed to derive values such as a count.