Angular Signals: The Future of Reactivity in Angular
Angular has been evolving rapidly, and with the release of Angular 16, one of the most significant improvements in its reactivity model has emerged: Signals.
Angular has been evolving rapidly, and with the release of Angular 16, one of the most significant improvements in its reactivity model has emerged: Signals.
If you're tired of the ChangeDetectorRef, zone.js quirks, and verbose RxJS boilerplate just to reactively update your templates, Angular Signals might be the reactive paradigm shift you’ve been waiting for.
In this blog, we’ll explore:
- What are Angular Signals?
- Why do Signals matter?
- How to use them
- Comparison with RxJS
- Real-world examples
What Are Signals?
Signals are a new reactive primitive introduced in Angular to handle state and reactivity in a more predictable, fine-grained, and efficient manner.
A Signal is a function that holds a value and notifies its dependents when that value changes.
import { signal } from '@angular/core';
const count = signal(0);
console.log(count()); // 0
count.set(5);
console.log(count()); // 5
Unlike BehaviorSubject or Observable, a Signal is:
- Synchronous – no subscriptions, just function calls.
- Fine-grained – only the components or computations depending on it are updated.
- Dependency-tracked – Angular tracks what depends on what, avoiding unnecessary re-renders.
Why Do Signals Matter?
Angular's traditional reactivity relies heavily on Zone.js and change detection trees, which can lead to performance overheads in large apps.
Signals bring:
- Improved Performance: Only reactive dependencies are updated.
- Simpler Code: No more async pipe or manual subscribe/unsubscribe.
- Better Debugging: Clearer dependency graphs and fewer side effects.
- Seamless Integration: Works alongside RxJS, not against it.
Using Signals in Angular
Let’s see how Signals fit in an Angular component.
1. Basic Usage in a Component
import { Component, signal, computed } from '@angular/core';
@Component({
selector: 'app-counter',
template: `
<button (click)="increment()">Increment</button>
<p>Count: {{ count() }}</p>
<p>Double: {{ doubleCount() }}</p>
`
})
export class CounterComponent {
count = signal(0);
doubleCount = computed(() => this.count() * 2);
increment() {
this.count.set(this.count() + 1);
}
}
- signal() creates a reactive value.
- computed() derives a new reactive value from others.
- Just call count() in the template or methods — no async, no subscriptions.
2. Effects
effect() lets you run side effects when dependent signals change.
import { effect } from '@angular/core';
effect(() => {
console.log('Count changed to', this.count());
});
This is Angular's way of listening reactively — automatically cleaned up and dependency-tracked.
Signals vs RxJS Observables
- When to use RxJS: For complex streams, user input debounce, websocket streams, etc.
- When to use Signals: For app state, derived values, local component logic.
They are complementary, not replacements.
Real-World Example: To-do List with Signals
import { signal, computed } from '@angular/core';
@Component({
selector: 'app-todo',
template: `
<input [(ngModel)]="newTask" />
<button (click)="addTodo()">Add</button>
<ul>
<li *ngFor="let todo of todos()">{{ todo }}</li>
</ul>
`
})
export class TodoComponent {
todos = signal<string[]>([]);
newTask = '';
addTodo() {
if (this.newTask.trim()) {
this.todos.set([...this.todos(), this.newTask]);
this.newTask = '';
}
}
}
Simple, reactive, and no boilerplate.
Best Practices for Signals
- Use signal() for local state.
- Use computed() for derived data.
- Use effect() for side effects (e.g., logging, triggering animations).
- Avoid mixing too much RxJS and Signals unless necessary.
- Use Signals in components, keep RxJS in services if your architecture already depends on it.
The Road Ahead
Angular Signals are a foundational step toward the new "Zone-less Angular" future. With Signals, Angular can skip global change detection, improving performance and scalability.
Expect more features like:
- Signal-based forms
- Zone-less routing
- Integration with new component APIs
Conclusion
Angular Signals offer a modern, intuitive, and high-performance way to manage reactivity in Angular apps.
By embracing Signals:
- Your code becomes cleaner.
- Your UI updates become faster.
- Your development experience improves.
If you're starting a new Angular project or refactoring an old one, give Signals a serious look — they might be the most transformative Angular feature since Ivy.
Further Reading
- Angular Docs: Signals
- RFC: Reactivity Model
- Zone-less Angular