Query child elements with signal queries

Now that you've learned how to use signals with directives, let's explore signal-based query APIs. These provide a reactive way to access and interact with child components and directives. Both components and directives can perform queries while also being queried themselves. Unlike the traditional ViewChild, signal queries automatically update and provide type-safe access to child components and directives.

In this activity, you'll add viewChild queries to interact with child components programmatically.

1. Add viewChild import

   First, add the viewChild import to access child components in app.ts.

   import {Component, signal, computed, viewChild, ChangeDetectionStrategy} from '@angular/core';

2. Create viewChild queries

   Add viewChild queries to the App component to access child components.

   // Query APIs to access child componentsfirstProduct = viewChild(ProductCard);cartSummary = viewChild(CartSummary);

   These queries create signals that reference child component instances.

3. Implement parent methods

   Use the viewChild queries to call methods on child components in app.ts:

   showFirstProductDetails() {  const product = this.firstProduct();  if (product) {    product.highlight();  }}initiateCheckout() {  const summary = this.cartSummary();  if (summary) {    summary.initiateCheckout();  }}

4. Test the interactions

   The control buttons should now work:

   • "Show First Product Details" - Calls highlight() on the ProductCard
   • "Initiate Checkout" - Calls initiateCheckout() on the CartSummary

   Click the buttons to see how viewChild queries enable parent components to control child behavior.

Perfect! You've learned how to use signal-based query APIs for child component interaction:

In the next lesson, you'll learn about how to react to signal changes with effect!