• Overview
@angular/core

contentChild

Initializer API
stablesince v19.0

Initializes a content child query. Consider using contentChild.required for queries that should always match.

API

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

Initializes a content child query.

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

@paramlocatorstring | ProviderToken<LocatorT>
@paramopts{ descendants?: boolean | undefined; read?: undefined; debugName?: string | undefined; } | undefined
@returnsSignal<LocatorT | undefined>
function contentChild<LocatorT, ReadT>(locator: string | ProviderToken<LocatorT>, opts: { descendants?: boolean | undefined; read: ProviderToken<ReadT>; debugName?: string | undefined; }): Signal<ReadT | undefined>;
@paramlocatorstring | ProviderToken<LocatorT>
@paramopts{ descendants?: boolean | undefined; read: ProviderToken<ReadT>; debugName?: string | undefined; }
@returnsSignal<ReadT | undefined>
function contentChild.required<LocatorT>(locator: string | ProviderToken<LocatorT>, opts?: { descendants?: boolean | undefined; read?: undefined; debugName?: string | undefined; } | undefined): Signal<LocatorT>;
@paramlocatorstring | ProviderToken<LocatorT>
@paramopts{ descendants?: boolean | undefined; read?: undefined; debugName?: string | undefined; } | undefined
@returnsSignal<LocatorT>
function contentChild.required<LocatorT, ReadT>(locator: string | ProviderToken<LocatorT>, opts: { descendants?: boolean | undefined; read: ProviderToken<ReadT>; debugName?: string | undefined; }): Signal<ReadT>;
@paramlocatorstring | ProviderToken<LocatorT>
@paramopts{ descendants?: boolean | undefined; 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 contentChild() function.

@Component({...})
export class TestComponent {
  headerEl = contentChild<ElementRef>('h');                    // Signal<ElementRef|undefined>
  headerElElRequired = contentChild.required<ElementRef>('h'); // Signal<ElementRef>
  header = contentChild(MyHeader);                             // Signal<MyHeader|undefined>
  headerRequired = contentChild.required(MyHeader);            // Signal<MyHeader>
}

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

Jump to details