iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use viewChild or viewChildren to query elements declared in a component’s own template; use contentChild or contentChildren to query content projected into it. Each query returns a signal, so call it to read the current result and compose it with APIs such as computed. Signal queries are production-ready in Angular 19 and later; decorator-based queries remain supported. Angular’s query guide covers the current APIs.
Choose a query by where the child comes from
Angular distinguishes a component’s own view from content supplied by the component’s caller. Choose the query family that matches that ownership:
- View query: The target is declared in this component’s template. Use
viewChildfor one match orviewChildrenfor multiple matches. - Content query: The target is supplied between this component’s opening and closing tags, typically through content projection. Use
contentChildfor one match orcontentChildrenfor multiple matches.
Queries do not cross component boundaries. A query can find matching elements within the relevant view or projected content, but it does not look inside another component’s own template. Angular’s guide explains the view and content distinction.
Declare and read a signal query
Signal query functions are compiler-recognized APIs. Initialize them as fields of a component or directive; do not call them like ordinary functions inside a constructor or method. For example, a component can query a child component in its own template like this:
#1 Best Overall
import { Component, computed, viewChild } from '@angular/core';
import { HeaderComponent } from './header.component';
@Component({
selector: 'app-page',
template: '<app-header />'
})
export class PageComponent {
header = viewChild(HeaderComponent);
headerTitle = computed(() => this.header()?.title);
}Call the query field to read its signal value: this.header(). Because an ordinary singular query may have no match, its value can be undefined; optional chaining, as in this.header()?.title, safely handles that case. The computed value above updates as the query result changes. See Angular’s signal-query examples.
Pick singular or plural based on the result you need
Singular query functions return one matching result, while plural functions return an array. Choose based on whether the template can contain one target or several.
| Query | Looks in | Result |
|---|---|---|
viewChild |
The component’s own template | One result or undefined |
viewChildren |
The component’s own template | An array of matching results |
contentChild |
Content supplied to the component | One result or undefined |
contentChildren |
Content supplied to the component | An array of matching results |
For example, a plural view query can find repeated action components and provide an array to a computed signal:
actions = viewChildren(ActionComponent);
actionLabels = computed(() => this.actions().map(action => action.label));Plural signal queries return standard arrays rather than the QueryList used by decorator-based plural queries. Angular lists array results, signal composition, and type inference among the benefits of the newer APIs in its query guide.
Rank #3
Handle missing and changing targets
Templates can change as application state changes. If a target is absent, or an @if block removes it, a singular query may have no result. Angular keeps query results current as the template changes, so read the signal where needed rather than assuming a one-time lookup will remain valid.
Use a required query only if the matching target is guaranteed to exist. For example, viewChild.required(...) and contentChild.required(...) exclude undefined from the result type and report an error if no match exists. They are not a way to silence optionality when a target can genuinely be absent. The viewChild API reference documents the required form.
Know the content-query traversal defaults
Content queries differ in how deeply they search within the relevant template:
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →contentChildsearches descendants by default.contentChildrenfinds direct children by default. Set itsdescendantsoption when deeper traversal within the same template is needed.
Deeper traversal still does not cross a component boundary. Consult the query guide when choosing the content-query options for a projected structure.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Signal queries and decorator queries
Angular recommends signal query functions for new projects, while continuing to support the original decorator-based query APIs. Signal queries integrate directly with computed and effect, provide standard arrays for plural results, and have improved type inference and timing behavior according to Angular’s guide and migration documentation. Existing decorator queries do not have to be removed just because signal queries are available.
Migrate existing query fields
For an existing project, Angular provides an automated migration for query decorator fields. Run it from the project directory:
ng generate @angular/core:signal-queries-migrationThe migration documentation also describes a VS Code code-refactor action. Review the generated changes against the project’s Angular version, especially where a query may be absent or where a required query would make a stronger assumption than the template guarantees. See Angular’s signal-query migration guide.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsCheck Angular version guidance
Signal queries are production-ready as of Angular 19.0; the current API reference marks viewChild stable since v19.0. Angular v18’s archived guide described signal queries as developer preview, so that label applies to the earlier version’s documentation, not the current v19-and-later status. Check the documentation for the version your project uses: Angular v18 archived query guide and current migration guide.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
