Signals in Angular - Smoke Signals

Signals are a new reactivity system introduced in Angular 16 - like smoke signals between castles of feudal Japan, instantly informing about state changes.

What are Signals?

Signals are values that:

• Are reactive - automatically notify about changes
• Are synchronous - always have the current value
• Are efficient - only dependent components update
• Are simple - easier than RxJS for simple cases

Basic Signals

1import { Component, signal, computed, effect } from '@angular/core';
2
3@Component({
4  selector: 'app-samurai-stats',
5  standalone: true,
6  template: \`
7    <div class="stats">
8      <h2>{{ name() }}</h2>
9      <p>Level: {{ level() }}</p>
10      <p>Experience: {{ experience() }} XP</p>
11      <p>XP to next level: {{ xpToNextLevel() }}</p>
12
13      <button (click)="gainExperience(100)">+100 XP</button>
14      <button (click)="levelUp()">Level Up!</button>
15    </div>
16  \`
17})
18export class SamuraiStatsComponent {
19  // Basic signals
20  name = signal('Musashi');
21  level = signal(1);
22  experience = signal(0);
23
24  // Computed signal - automatically recalculates when dependencies change
25  xpToNextLevel = computed(() => {
26    const requiredXp = this.level() * 1000;
27    return requiredXp - this.experience();
28  });
29
30  constructor() {
31    // Effect - executes when dependent signals change
32    effect(() => {
33      console.log(\`\${this.name()} reached level \${this.level()}!\`);
34    });
35  }
36
37  gainExperience(amount: number): void {
38    this.experience.update(xp => xp + amount);
39  }
40
41  levelUp(): void {
42    this.level.update(lvl => lvl + 1);
43    this.experience.set(0);
44  }
45}