How to Use Angular's Signal Inputs (Quick Guide)

Today I'm going to show you the new Angular signal inputs feature and talk about its benefits.

When building Angular apps we often need our parent components to communicate with their child components.

In the past we've used input and output properties to do that communication.

But starting in Angular version 17 we now have signal-based inputs as an alternative to input properties.

This makes it easier to react to changes.

Let's start with a simple Input demo

Imagine we have a simple component called hero list.

The job of this child component is to simply render an array of names (or heroes) that it receives from it's parent component.

The child component would look something like this.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-hero-list',
  standalone: true,
  imports: [],
  template: `
    <ul>
      @for (name of names; track $index) {
        {{ name }}
      }
    </ul>
  `,
  styleUrl: './hero-list.component.scss'
})
export class HeroListComponent {
  @Input() names = [''];
}

As you can see our child component receives a string array and renders it using the @for syntax.

Next we'll turn to our parent component. It should look like this.

import { Component } from '@angular/core';
import { HeroListComponent } from '../hero-list/hero-list.component';

@Component({
  selector: 'app-heroes',
  standalone: true,
  imports: [HeroListComponent],
  template: `
    <app-hero-list [names]="names"></app-hero-list>
  `,
  styleUrl: './heroes.component.scss'
})
export class HeroesComponent {
  names = ['Joe', 'Alice', 'Sarah']
}

Since the hero list uses the hero component it's considered to be the parent component.

And any component it uses is called a child component

By dividing this functionality into multiple components we can more easily create maintain and reuse components. Which is a good reason why the Angular framework is an awesome choice for building large-scale enterprise apps.

But what about the new signal input feature?

How do we use the new signal input feature?

When using Angular signals we will also need to use the signal input API.

The input function allows declaration of Angular inputs in directives and components. This input is a signal. And the value of the input are exposed as a signal. The signal always holds the latest value of the input that is bound from the parent.

So what does the signal input look like in our hero example?

Our parent component does not change, but our child component does.

Here's what signal-based inputs look like.

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-hero-list',
  standalone: true,
  imports: [],
  template: `
    <ul>
      @for (name of names(); track $index) {
        {{ name }}
      }
    </ul>
  `,
  styleUrl: './hero-list.component.scss'
})
export class HeroListComponent {
  names = input(['']);
}

And that, my friend, is a quick guide on how to use signal-based inputs in Angular

Till next time,

Daniel Kreider