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 typeInputSignal
and defines reactive input.name
is a signal that can be updated reactively.effect()
listens to changes and reacts accordingly.
Benefits of Signal Inputs
- Fine-Grained Reactivity: Only the parts of the DOM that depend on the changed signal are updated.
- Simpler Debugging: Signals offer better debugging experiences with clear reactive flow.
- Better Performance: Reduces overhead by avoiding global change detection.
- 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.