Understanding Angular Signals — The Future of Reactivity in Angular

Source: Dev.to

What Are Signals?

A signal is a special reactive variable. When its value changes, Angular automatically updates the UI—no subscriptions, no async pipes, no boilerplate.

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

const counter = signal(0);
counter(); // returns 0

Think of a signal as a state container that “reacts” when changed.

Why Should You Use Signals?

• No more manual subscriptions – no subscribe() or unsubscribe() headaches.
• Predictable UI updates – only affected parts re‑render.
• Cleaner component logic – read a signal like a function: mySignal().
• Perfect for local and shared state – simplifies component state management dramatically.

How to Use Signals in Angular

Create a Signal

count = signal(0);

Read It in the Template

Count: {{ count() }}

Update the Signal

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

Set a New Value

this.count.set(100);

Computed Signals

Use computed() to automatically create derived values.

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

Whenever firstName or lastName changes, fullName updates instantly.

Effects – Run Logic When Signals Change

effect(() => {
  // Example: make an API call, log, or react to state changes
});

Signals vs. RxJS

Signals are not a replacement for RxJS; they simplify many common cases where RxJS can feel overly complex, while RxJS remains valuable for advanced streaming scenarios.

---

Angular Signals bring a modern, lightweight, and highly predictable reactivity model to Angular. Whether you’re building small features or large applications, Signals help you write cleaner code with less mental overhead. If you haven’t tried Signals yet, now is the perfect time—your Angular workflow will feel faster, simpler, and more enjoyable.