Angular Signals

Angular Signals, introduced in Angular 16, are a new reactivity model built into the Angular core package (@angular/core). They provide a lightweight, fine-grained reactive system that works without Zone.js, enabling better performance and easier state tracking.

Think of Signals as reactive variables that notify when their values change, similar to BehaviorSubject, computed, or useState in other frameworks.

Use of Signals

Setup

If you are using Angular 16 or later, Signals are built-in with @angular/core. Just start using them; there is no extra package needed.

Counter with Computed Signals

To create a counter, we can use signals:

Component

// counter.component.ts
import { Component, computed, effect, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css'],
})
export class CounterComponent {
  count = signal(0);

  doubleCount = computed(() => this.count() * 2);

  constructor() {
    effect(() => {
      console.log(`Count changed to ${this.count()}`);
    });
  }

  increment() {
    this.count.set(this.count() + 1);
  }

  decrement() {
    this.count.set(this.count() - 1);
  }

  reset() {
    this.count.set(0);
  }
}

HTML Template

<!-- counter.component.html -->

<div class="counter-card">
  <h2>Counter: {{ count() }}</h2>
  <p>Double: {{ doubleCount() }}</p>


  <button (click)="increment()">Increment</button>
  <button (click)="decrement()">Decrement</button>
  <button (click)="reset()">Reset</button>
</div>

Key Signal APIs

Function Description
signal(initialValue) Creates a reactive signal
computed(() => ...) Creates a derived signal
effect(() => ...) Runs side-effect when the signal changes
set(), update() Update signal values

WritableSignal vs ReadonlySignal

const name = signal('Cynthia');
name.set('Vikas'); // writable

const age = computed(() => 2025 - 1995);
// age.set(...)  Not allowed  because it is readonly

Signals are great for local component state, but RxJS is still useful for:

Benefits of using Signals

Conclusion

Angular Signals bring a modern, powerful, and ergonomic reactive system to Angular applications. They are used for