@angular/core

viewChild

Initializer API

stablesince v19.0

Initializes a view child query.

Consider using viewChild.required for queries that should always match.

API

function viewChild<LocatorT, ReadT>(locator: string | ProviderToken<LocatorT>, opts: { read: ProviderToken<ReadT>; debugName?: string | undefined; }): Signal<ReadT | undefined>;

Initializes a view child query. Consider using viewChild.required for queries that should always match.

@paramlocatorstring | ProviderToken<LocatorT>

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

@returnsSignal<ReadT | undefined>

function viewChild<LocatorT>(locator: string | ProviderToken<LocatorT>, opts?: { debugName?: string | undefined; } | undefined): Signal<LocatorT | undefined>;

@paramlocatorstring | ProviderToken<LocatorT>

@paramopts{ debugName?: string | undefined; } | undefined

@returnsSignal<LocatorT | undefined>

function viewChild.required<LocatorT>(locator: string | ProviderToken<LocatorT>, opts?: { debugName?: string | undefined; } | undefined): Signal<LocatorT>;

@paramlocatorstring | ProviderToken<LocatorT>

@paramopts{ debugName?: string | undefined; } | undefined

@returnsSignal<LocatorT>

function viewChild.required<LocatorT, ReadT>(locator: string | ProviderToken<LocatorT>, opts: { read: ProviderToken<ReadT>; debugName?: string | undefined; }): Signal<ReadT>;

@paramlocatorstring | ProviderToken<LocatorT>

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

@returnsSignal<ReadT>

Usage Notes

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

@Component({template: '<div #el></div><my-component #cmp />'})export class TestComponent { divEl = viewChild<ElementRef>('el'); // Signal<ElementRef|undefined> divElRequired = viewChild.required<ElementRef>('el'); // Signal<ElementRef> cmp = viewChild(MyComponent); // Signal<MyComponent|undefined> cmpRequired = viewChild.required(MyComponent); // Signal<MyComponent>}