Angular has taken a big leap forward with the introduction of Signals, a simpler and more intuitive reactivity model designed to solve long-standing challenges with change detection, manual subscriptions, and complex RxJS patterns. If you’re looking to write cleaner and more predictable Angular code, Signals are the game-changer you’ve been waiting for.
What Are Signals?
A signal is a special reactive variable. When its value changes, Angular automatically updates the UI — no subscriptions, no async pipes, no boilerplate.
`import { signal } from '@angular/core';
const counter = signal(0);
counter(); // returns 0
counter.set(5); // updates the value`
Think of a signal as a state container that “reacts” when changed.
Why Should You Use Signals?
- No more manual subscriptions
- No subscribe() or unsubscribe() headaches.
- Predictable UI updates
- Only affected parts re-render.
- Cleaner component logic
- You read a signal like a function: mySignal().
- Perfect for local and shared state
Simplifies component state management dramatically.
- How to Use Signals in Angular
Create a Signal
count = signal(0);Read It in the Template
<p>Count: {{ count() }}</p>Update the Signal
increment() {
this.count.update(v => v + 1);
}Set a New Value
this.count.set(100);
- Computed Signals
Use computed() to automatically create derived values.
fullName = computed(() =>${this.firstName()} ${this.lastName()});
Whenever firstName or lastName changes, fullName updates instantly.
Effects — Run Logic When Signals Change
effect(() => {
console.log('Counter changed:', this.count());
});
Perfect for API calls, logging, or reacting to state changes.
Signals vs RxJS — Which Should You Use?
Scenario Signals RxJS
Local component state ⭐ Best choice Overkill
Global state/store Great Great
Complex async streams Limited ⭐ Best choice
Event handling Works Works
Signals are not replacing RxJS — they are simplifying many common cases where RxJS felt too complex.
Final Thoughts
Angular Signals bring a modern, lightweight, and highly predictable reactivity model to Angular. Whether you're building small features or large applications, Signals help you write cleaner code with less mental overhead.
If you haven’t tried Signals yet, now is the perfect time — your Angular workflow will feel faster, simpler, and more enjoyable.