The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Use viewChild or viewChildren to find components, directives, or other targets in your component’s own template. Use contentChild or contentChildren to find content projected into your component. Choose the singular or plural form according to whether you expect one match or several.
For new code, Angular recommends signal-based query functions; the decorator-based query APIs remain supported. The examples below follow Angular’s current guide, which does not specify a minimum framework version. Check the API documentation for the Angular version installed in your project before applying version-specific changes. Angular’s queries guide
As an Amazon Associate I earn from qualifying purchases.
Choose a query by where the child is declared
The key distinction is template ownership. A component’s view is the template it declares itself. Its content is the nested content supplied by the component’s consumer where the component is used.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →| Where the target appears | One match | Multiple matches |
|---|---|---|
| In the querying component’s own template | viewChild |
viewChildren |
| In content projected into the querying component | contentChild |
contentChildren |
These queries do not cross component boundaries. A query can find targets within the relevant template, but it cannot inspect a separate component’s internal template.
#1 Best Overall
Query the component’s own template
Use a view query when the target is declared in the querying component’s template. The locator may be a component or directive type, a template reference variable, or a provider token.
Find one child
A signal-based viewChild query returns a signal. Call it to read the current result. If the target may not exist—for example, because it is conditionally rendered—the result can be undefined.
header = viewChild(CustomCardHeader);
headerText = computed(() => this.header()?.text);Optional chaining lets the computed value handle a missing child. You can also use an explicit conditional branch when the absence needs separate handling.
Free tools Windows power users keep installed
One-click scans. No signup required.
Find several children
Use viewChildren when the template can contain multiple matching targets. Its signal returns the current collection; call the signal to read it.
Query projected content
Use content queries for targets nested inside a component’s projected content. For example, a component that accepts consumer-provided content can query that content rather than its own template.
Find one projected target
contentChild returns one result and traverses descendants by default, within the same template. As with a single view query, the result can be absent; use the required form only if a match is an invariant of the component’s usage.
Rank #3
Find multiple projected targets
contentChildren returns a collection, but by default it finds direct children only. To include deeper descendants within the same template, pass { descendants: true }.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
items = contentChildren(MenuItem, { descendants: true });Setting descendants: true does not make the query cross into another component’s template.
Decide whether a match is optional or required
Signal-based single-result queries can be absent, and Angular updates query results as application state changes. A target that appears or disappears because of conditional rendering can therefore change the result over time.
- Use the ordinary single-result query when absence is possible, and handle
undefinedin code that reads it. - Use
viewChild.requiredorcontentChild.requiredwhen the component’s contract guarantees a match. The required form gives a non-optional result type; Angular reports an error if there is no match.
Do not mark a query required merely to avoid handling an optional child. The required form is appropriate when a missing target really indicates an invalid component configuration.
Choose a locator and, if needed, a different read token
A query locator can be a component or directive type, a template reference variable name as a string, or a provider token. CSS selectors are not supported as query locators.
The read option lets a query return a different value available from the matched element’s injector. Depending on what the element provides, examples include ElementRef, TemplateRef, and Injector. Use this when you need one of those values rather than the value identified by the locator.
Use decorator queries in existing code
@ViewChild, @ViewChildren, @ContentChild, and @ContentChildren remain supported. Angular recommends signal-based query functions for new projects, but existing decorator-based code does not need to be rewritten solely because the newer API exists. Angular’s query API guidance
Lifecycle timing for single-result decorators
With the default dynamic behavior, decorator query results are commonly read after the corresponding view or content has initialized. Use static: true with @ViewChild or @ContentChild only when the target is guaranteed to be present and does not depend on conditional rendering. A static result is available in ngOnInit, but it does not update after initialization.
Collections from plural decorators
@ViewChildren and @ContentChildren expose a QueryList. It provides array-like helpers and a changes observable for observing changes to the collection.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteQuick Recap
A quick choice checklist
- Target declared in your template: choose a view query.
- Target supplied as projected content: choose a content query.
- One expected match: choose the singular form; several: choose the plural form.
- Projected descendants beyond direct children: use
contentChildrenwith{ descendants: true }when needed. - Target may be absent: handle the optional single-result value; use
.requiredonly for a guaranteed match. - New implementation: prefer signal queries; existing decorator code remains supported.
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.
