Angular Signals (v16+)

For over a decade, Angular relied on Zone.js to magically track variable changes across the application and trigger UI updates. While powerful, Zone.js causes significant performance overhead by checking almost the entire component tree anytime a click or setTimeout occurs.

In Angular 16, Google introduced Signals. Signals are fundamentally a new way to track state. They offer fine-grained reactivity, meaning when a Signal changes, Angular updates ONLY the exact HTML DOM node attached to it, completely ignoring the rest of the application!

What is a Signal?

A Signal is simply a wrapper around a value that can notify interested consumers when that value changes.

import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <!-- To read a signal in HTML, you MUST call it as a function () -->
    <h1>Count: {{ count() }}</h1>
    
    <!-- Computed signals automatically update! -->
    <h2>Double: {{ doubleCount() }}</h2>
    
    <button (click)="increment()">Increment</button>
  `
})
export class CounterComponent {
  
  // 1. Defining a Writable Signal
  count = signal(0);
  
  // 2. Defining a Computed Signal (Derives value automatically when count() changes)
  doubleCount = computed(() => this.count() * 2);

  constructor() {
    // 3. Effects run ONLY when the Signals inside them change!
    effect(() => {
      console.log(`The current count is: ${this.count()}`);
    });
  }

  increment() {
    // Updating a Signal
    this.count.update(value => value + 1);
    
    // You can also completely overwrite it:
    // this.count.set(10);
  }
}

Signals vs RxJS Observables

Should you use Signals or RxJS?

• Use Signals for: Synchronous UI state (like managing counts, form visibility toggles, or caching local data). They are immensely easier to read than RxJS BehaviorSubjects.
• Use RxJS for: Asynchronous EVENT streams (like HTTP requests, Websocket feeds, or complex debounced search-bar typings).

Angular provides toSignal() and toObservable() so you can effortlessly mix both paradigms together.

Conclusion

Signals are the undisputed future of Angular. In the end, they will allow Angular to completely strip Zone.js from its bundle, making applications universally faster. How do we structure massive data across dozens of components? Let's check out State Management.