Free tools Windows power users keep installed
One-click scans. No signup required.
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 that component. For new code, Angular recommends signal-based query functions; the decorator APIs remain supported.
Choose a query by where the child is declared
The key distinction is ownership of the template, not how close two components appear in the rendered page. A view query searches the querying component’s own template. A content query searches content nested inside the component where it is used—typically content supplied between that component’s opening and closing tags.
| Target and expected matches | Signal query | Decorator API |
|---|---|---|
| One match in the component’s own template | viewChild |
@ViewChild |
| Multiple matches in the component’s own template | viewChildren |
@ViewChildren |
| One projected-content match | contentChild |
@ContentChild |
| Multiple projected-content matches | contentChildren |
@ContentChildren |
Signal query functions return signals. Call the signal to read its current result, such as this.header(). The singular forms return one match; the plural forms return collections.
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 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchQuery a child in your own template
Use viewChild for one target or viewChildren for multiple targets in the component’s template. A locator can be a component or directive type, or a template reference variable.
#1 Best Overall
import { Component, computed, viewChild } from '@angular/core';
@Component({
selector: 'custom-card',
template: '<custom-card-header>Welcome</custom-card-header>',
})
export class CustomCard {
header = viewChild(CustomCardHeader);
headerText = computed(() => this.header()?.text);
}Because the target might not exist at every moment, the example uses optional chaining. A query’s result updates as application state changes, including when a target is added or removed by conditional rendering.
Query content projected into a component
Use content queries when you need to find a target in nested content supplied where your component is used. For example, a component that accepts child content can query for a directive placed in that content with contentChild or contentChildren.
The two content-query forms differ in their default search depth:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →contentChildsearches descendants in the same template by default.contentChildrensearches direct children by default. Pass{ descendants: true }to include deeper descendants in that same template.
Neither view nor content queries cross a component boundary into another component’s separate template. To query a projected target, the query must be made from the component receiving that content; a parent query cannot use this mechanism to look through an intervening component’s template.
Rank #3
Handle optional and required matches
A singular query can have no result—for example, when its target is absent because it is inside an @if. Treat the result as potentially undefined by using a conditional check, optional chaining, or another appropriate branch.
If a match must always exist, use the required form, such as viewChild.required(CustomCardHeader) or contentChild.required(SomeDirective). Required queries have a non-optional result type, and Angular reports an error if the target is missing. Use this only for a genuine invariant; it is not a substitute for handling a child that may be absent.
Choose a locator and, if needed, a different read value
Angular query locators can be component or directive types, template reference variable names, or provider tokens. CSS selectors are not supported as query locators.
By default, the query returns the matched component, directive, or other value associated with its locator. The read option can instead request a value available from the matched element’s injector, such as ElementRef, TemplateRef, or Injector.
Keep decorator queries working in existing code
@ViewChild, @ViewChildren, @ContentChild, and @ContentChildren remain supported. Decorator queries use lifecycle timing: with the default dynamic behavior, code commonly reads the result after view or content initialization.
Use static: true narrowly with @ViewChild or @ContentChild. It makes a guaranteed target available in ngOnInit, but the result does not update after initialization. It is therefore unsuitable for a target that may appear or disappear through conditional rendering.
The plural decorator queries expose QueryList collections. A QueryList provides array-like helpers and a changes observable for reacting to collection updates.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsApply the choice to your component
- Locate the declaration. If the target is in your component’s template, choose a view query. If it is projected content supplied to your component, choose a content query.
- Decide whether you expect one or many. Use the singular query for one result and the plural query for a collection.
- Decide whether absence is valid. Handle an optional singular result, or use
.requiredonly when the target must exist. - Set the search depth for projected content. Remember that
contentChildtraverses descendants by default, whilecontentChildrenneeds{ descendants: true }to search beyond direct children. - Use the query style that fits your codebase. Prefer signal-based query functions for new code; keep decorator queries where an existing application uses them.
For the complete API details, see Angular’s guide to referencing component children with queries.
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.
