Signal Inputs in Angular

Overview

Angular introduced signal inputs in 17.1.0 minor release. Signal inputs provide reactive behavior to component inputs by tracking changes whitout need of implementing OnChange interface

In traditional Angular components, inputs are usually managed via the @Input() decorator. With the new reactive paradigm, Angular introduced Signal Inputs to bring signals directly into the input flow of a component.

Signal Inputs allow components to receive reactive values (signals) from their parent components. This integration improves data flow efficiency and aligns perfectly with the signal-based reactivity model.

Demo

See the demo at https://stackblitz.com/edit/stackblitz-starters-tcje5c8m?file=src%2Fparent.component.ts

Defining Signal Inputs

Here’s how you can define and use signal inputs in an Angular components

Parent Component

import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { Child } from './child.component';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-parent',
  imports: [Child, ReactiveFormsModule],
  template: `
    <h1>Angular Signals Inputs</h1>
    <hr/>
    <div>
      <h2>Parent</h2>
      Name: <input [formControl]="name" type="text" />
   </div>

<app-child [name]="name.value"/>
  `,
})
export class Parent {
  name = new FormControl('Angular');
}

Child Component

import { Component, input, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-child',
  template: `
    <hr/>
    <div>
      <h2>Child</h2>
      Name Received From Parent: <b>{{name()}}</b>
    </div>
  `,
})
export class Child {
  name = input();
}

• input is signal of type InputSignal and defines reactive input.
• name is a signal that can be updated reactively.
• effect() listens to changes and reacts accordingly.

Benefits of Signal Inputs

1. Fine-Grained Reactivity: Only the parts of the DOM that depend on the changed signal are updated.
2. Simpler Debugging: Signals offer better debugging experiences with clear reactive flow.
3. Better Performance: Reduces overhead by avoiding global change detection.
4. Ease of Use: Native integration with the Angular way (decorators, DI, etc.)

How Signal Inputs Differ from Traditional Inputs?

Traditional Inputs	Signal Inputs
Value updates are pushed manually.	Value updates are tracked reactively.
Full component change detection triggered.	Only dependent parts updated.
Requires additional observables or subjects for reactivity.	Signals are reactive out-of-the-box.

Conclusion

Signal Inputs in Angular represent a powerful paradigm shift towards a more reactive, efficient, and manageable architecture. They simplify how components receive and react to data changes, reduce performance overhead, and make applications more predictable.

By embracing Signal Inputs, developers can build more scalable and maintainable Angular applications with minimal boilerplate code. As Angular continues evolving, understanding and effectively utilizing Signal Inputs will be an essential skill for modern web development.