Angular — Signals

What are Signals?

Signals are reactive primitives that hold values and notify dependents when they change.

Creating Signals

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

@Component({ ... })
export class MyComponent {
  // Writable signal
  count = signal(0);
  
  // Read-only computed
  double = computed(() => this.count() * 2);
  
  // Effect
  constructor() {
    effect(() => {
      console.log('Count changed:', this.count());
    });
  }
}

Updating Signals

count = signal(0);

// Set value
this.count.set(5);

// Update with function
this.count.update(c => c + 1);

Computed Signals

todos = signal([
  { text: 'Learn Angular', completed: true },
  { text: 'Build App', completed: false }
]);

completedCount = computed(() => 
  this.todos().filter(t => t.completed).length
);

Signal Inputs

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `<p>{{name()}}</p>`
})
export class UserComponent {
  name = input<string>('');
  age = input<number>(0);
}

Signal Outputs

import { Component, output } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button (click)="clicked.emit()">Click</button>`
})
export class ButtonComponent {
  clicked = output<void>();
}

Benefits of Signals

• Fine-grained reactivity
• Better performance
• Simpler code
• No zone.js dependency

Mini Practice

1. Create writable signals
2. Use computed signals
3. Add effects
4. Pass signal inputs

Up Next

Continue with Lifecycle Signals — lifecycle with signals.