Angular Academy · Lesson

View Queries with viewChild

Query child elements as signals.

Lesson 4 of 413 steps

View Queries with viewChild is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “View Queries with viewChild” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “View Queries with viewChild”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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