Passing data to components with input signals

Now that you've learned managing async data with signals, let's explore Angular's signal-based input() API for passing data from parent to child components, making component data flow more reactive and efficient. If you're familiar with component props from other frameworks, inputs are the same idea.

In this activity, you'll add signal inputs to a product card component and see how parent data flows down reactively.

  1. Add signal inputs to ProductCard

    Add signal input() functions to receive data in the product-card component.

    // Add imports for signal inputsimport {Component, input, ChangeDetectionStrategy} from '@angular/core';// Add these signal inputsname = input.required<string>();price = input.required<number>();available = input<boolean>(true);

    Notice how input.required() creates an input that must be provided, while input() with a default value is optional.

  2. Connect inputs to the template

    Update the template in product-card to display the signal input values.

    <div class="product-card">  <h3>{{ name() }}</h3>  <p class="price">\${{ price() }}</p>  <p class="status">Status:    @if (available()) {      Available    } @else {      Out of Stock    }  </p></div>

    Input signals work just like regular signals in templates - call them as functions to access their values.

  3. Connect parent signals to child inputs

    Update the product-card usage in app.ts to pass dynamic signal values instead of static ones.

    <!-- Change from static values: --><product-card name="Static Product" price="99" available="true" /><!-- To dynamic signals: --><product-card [name]="productName()" [price]="productPrice()" [available]="productAvailable()" />

    The square brackets [] create property bindings that pass the current signal values to the child.

  4. Test reactive updates

    Add methods in app.ts to update the parent signals and see how the child component reacts automatically.

    updateProduct() {  this.productName.set('Updated Product');  this.productPrice.set(149);}toggleAvailability() {  this.productAvailable.set(!this.productAvailable());}
    <!-- Add controls to test reactivity --><div class="controls">  <button (click)="updateProduct()">Update Product Info</button>  <button (click)="toggleAvailability()">Toggle Availability</button></div>

    When parent signals change, the child component automatically receives and displays the new values!

Excellent! You've learned how signal inputs work:

  • Signal inputs - Use input() and input.required() to receive data from parent components
  • Reactive updates - Child components automatically update when parent signal values change
  • Type safety - Signal inputs provide full TypeScript type checking
  • Default values - Optional inputs can have default values while required inputs must be provided

Signal inputs make component communication more reactive and eliminate the need for OnChanges lifecycle hooks in many cases.

In the next lesson, you'll learn about two-way binding with model signals!