What Are Angular Signals?

Angular Signals are a reactive state management feature introduced in Angular 16. They provide a new way to handle reactive data flow in Angular applications, similar to RxJS observables, but with a simpler and more efficient approach.

Why Signals?

Traditional Angular change detection relies on Zone.js, which can lead to unnecessary re-renders. Signals offer fine-grained reactivity, updating only the components that actually depend on the changed data.

Key Features of Angular Signals

1. Automatic Tracking – No need for manual subscriptions like in RxJS.
2. Fine-Grained Reactivity – Only dependent components re-render.
3. Immutable & Read-Only Access – Signals prevent unintended mutations.
4. Composable – Signals can be combined and derived from other signals.
5. Better Performance – Eliminates unnecessary change detection cycles.

How to Use Signals in Angular

1️⃣ Creating a Signal

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

const count = signal(0); // Creates a signal with an initial value of 0

console.log(count()); // Logs 0
count.set(5);
console.log(count()); // Logs 5

2️⃣ Updating a Signal

count.set(10);   // Set a new value  
count.update(n => n + 1);  // Increment by 1  
count.mutate(n => n += 5); // Mutate the value directly  

3️⃣ Using Signals in Components

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">Count: 8</button>`
})
export class CounterComponent {
  count = signal(0);

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

Types of Signals in Angular

Angular provides different types of signals to manage reactive state efficiently. These signals help in handling local state changes while optimizing performance.

1️⃣ Writable Signals (Standard Signals)

Writable signals hold mutable state and can be updated. They are created using the signal() function.

• ✅ Stores state
• ✅ Can be updated using .set(), .update(), or .mutate()
• ✅ Components re-render only when the value changes

Example

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

const count = signal(0); // Writable signal with initial value

count.set(5);         // Directly set a new value
count.update(n => n + 1);  // Modify based on the previous value
count.mutate(n => n += 2); // Mutate the existing value (for objects/arrays)

console.log(count()); // Output: 8

💡 Use case: Storing and updating component state efficiently.

2️⃣ Derived Signals (Computed Signals)

Derived signals (also called computed signals) don’t store state but automatically recompute their value when dependencies change. They are created using computed().

• ✅ Automatically updates when dependencies change
• ✅ Read-only (cannot be modified manually)
• ✅ Useful for deriving values from other signals

Example

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

const count = signal(2);
const doubleCount = computed(() => count() * 2); // Always recalculates

console.log(doubleCount()); // Output: 4

count.set(5);
console.log(doubleCount()); // Output: 10 (automatically updated)

💡 Use case: Calculating dependent values, like total price, derived counters, or transformed state.

3️⃣ Effect Signals

Effect signals run side effects whenever dependent signals change. They are created using effect().

• ✅ Automatically triggers side effects
• ✅ Runs when any dependent signal changes
• ✅ Useful for logging, API calls, DOM updates, or debugging

Example

import { effect } from '@angular/core';

const count = signal(0);

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

count.set(1); // Logs: "Count changed to: 1"
count.set(2); // Logs: "Count changed to: 2"

💡 Use case: Watching for changes in state and performing side effects like API calls, analytics tracking, or logging.

Comparison of Angular Signal Types

Why Should You Use Signals in Angular?

• ✅ Simpler than RxJS for local state
• ✅ Optimized performance (avoids unnecessary re-renders)
• ✅ Better DX (Developer Experience) – No need for subscriptions/unsubscriptions
• ✅ Works well with Angular’s reactivity model

Which Signal Type Should You Use?

1. Use signal() for storing and updating state in a component
2. Use computed() for deriving new values based on existing signals
3. Use effect() for side effects like logging or API calls

Final Thoughts

Angular Signals bring reactivity to Angular in a more intuitive and performant way. They don’t replace RxJS but provide an alternative for local state management where full-fledged observables aren’t needed.

🔥 Should you use them? Yes, if you want a more efficient and simpler way to manage state in Angular apps! 🚀

For a ready-made project based on this guide, visit: GitHub Repository