Angular Academy · Lesson

View Queries with viewChild

Query child elements as signals.

View Queries with viewChild is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Querying the View

Components often need a reference to an element or child component in their template. Modern Angular provides the signal-based viewChild() query function.

Declaring a viewChild

Call viewChild() with a template reference name or a component type. The result is a signal.

import { Component, viewChild, ElementRef } from "@angular/core";

@Component({
  selector: "app-form",
  template: "<input #box>"
})
export class FormComponent {
  box = viewChild<ElementRef>("box");
}

Reading the Query

Like all signals, read a view query by calling it. It returns the matched element or undefined until the view is ready.

focus() {
  this.box()?.nativeElement.focus();
}

Querying a Child Component

Pass a component class to get a typed reference to a child component instance.

import { viewChild } from "@angular/core";

child = viewChild(ChildComponent);

run() {
  this.child()?.doSomething();
}

Required View Queries

Use viewChild.required() when the queried element must exist. The signal is then non-nullable.

box = viewChild.required<ElementRef>("box");

focus() {
  this.box().nativeElement.focus(); // no optional chaining
}

Querying Multiple Elements

viewChildren() returns a signal holding a read-only array of all matches.

import { viewChildren } from "@angular/core";

items = viewChildren(ItemComponent);

count() {
  return this.items().length;
}

When Queries Resolve

Signal view queries resolve after the view initializes. Reading them in an effect ensures you act once they are available.

constructor() {
  effect(() => {
    const el = this.box();
    if (el) el.nativeElement.focus();
  });
}

viewChild vs ViewChild Decorator

The signal viewChild() replaces the classic @ViewChild decorator, integrating with signals and avoiding manual lifecycle timing in many cases.

// classic:
@ViewChild("box") box!: ElementRef;

// modern:
box = viewChild<ElementRef>("box");

Reading a Specific Token

The read option lets you query a different token from the matched element, such as a directive or ElementRef.

tooltip = viewChild("trigger", { read: TooltipDirective });

contentChild for Projection

For projected content rather than the component own view, use the parallel contentChild() and contentChildren() queries.

import { contentChild } from "@angular/core";

header = contentChild(HeaderComponent);

Choosing the Right Query

Use view queries for your own template and content queries for projected content; pick the required variant when the target must exist, and the plural variant for collections.

Quick Check

Test your understanding of signal view queries.

Recap

The signal viewChild() queries elements and child components in a component view; use viewChild.required() for guaranteed targets, viewChildren() for collections, the read option for specific tokens, and contentChild() for projected content.

Frequently asked questions

Is the “View Queries with viewChild” lesson free?

Yes — the full text of “View Queries with viewChild” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “View Queries with viewChild”?

Query child elements as signals. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “View Queries with viewChild” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy