Angular Signals: A Complete Guide

Angular Signals are a new reactive primitive introduced in Angular 16+. They provide a simpler way to manage state in your components without the complexity of RxJS for simple use cases.

What are Signals?

A signal is a wrapper around a value that notifies interested consumers when that value changes. Signals can contain any value, from primitives to complex data structures.

Creating Signals

Here's how to create and use signals:

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

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count() }}</p>
      <p>Double: {{ doubleCount() }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);

  increment() {
    this.count.update(value => value + 1);
  }
}

Signal Methods

Signals provide three main methods:

• set(value) - Replace the current value
• update(fn) - Update based on current value
• mutate(fn) - Mutate the value in place (for objects/arrays)

const items = signal<string[]>([]);

items.set(['a', 'b', 'c']);

items.update(current => [...current, 'd']);

Computed Signals

Computed signals derive their value from other signals:

const firstName = signal('John');
const lastName = signal('Doe');

const fullName = computed(() => `${firstName()} ${lastName()}`);

Effects

Effects run side effects when signals change:

effect(() => {
  console.log('Count changed:', this.count());
});

Best Practices

1. Use signals for component state
2. Use computed for derived values
3. Keep effects simple and focused
4. Consider RxJS for complex async operations