---

title: 'Angular Signals: A Deep Dive' slug: angular-signals-deep-dive summary: Explore Angular's reactive primitive — signals. Learn how to use signal(), computed(), and effect() to build performant, reactive UIs. date: 2024-03-20 author: Alex Rivera category: angular tags: [angular, signals, performance] status: published featured: true#

Angular Signals: A Deep Dive#

Signals are Angular's answer to fine-grained reactivity. Introduced in Angular 16 and stabilized in 17+, signals let you build reactive UIs with minimal boilerplate.

What is a Signal?#

A signal is a reactive value — when it changes, Angular knows exactly which parts of the UI to update.

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

const count = signal(0);
const doubled = computed(() => count() * 2);

effect(() => {
  console.log(`Count: ${count()}, Doubled: ${doubled()}`);
});

count.set(5); // logs: Count: 5, Doubled: 10

Signal Types#

`signal()` — Writable#

const name = signal('Angular');
name.set('Signals');
name.update(n => n + ' are great');

`computed()` — Derived#

const firstName = signal('John');
const lastName = signal('Doe');
const fullName = computed(() => `${firstName()} ${lastName()}`);

`effect()` — Side Effects#

effect(() => {
  document.title = `${title()} | My App`;
});

Signals in Components#

@Component({
  template: `
    <p>Count: {{ count() }}</p>
    <button (click)="increment()">+</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CounterComponent {
  count = signal(0);
  increment() {
    this.count.update(n => n + 1);
  }
}

Signal Inputs (Angular 17.1+)#

@Component({ ... })
export class CardComponent {
  title = input.required<string>();
  subtitle = input('');
}

Signals are the future of Angular reactivity.