If you’ve been working with Angular for a while, you probably know that reactivity in Angular apps has always revolved around RxJS and the Change Detection mechanism. While powerful, this approach sometimes feels like wielding a sledgehammer to crack a nut—especially when managing local, simple state.

With Angular v16, the Angular team introduced something game-changing: Signals. And they’re not just another feature bolted on top; they represent a new way of thinking about state management and reactivity in Angular. Let’s dive into what signals are, why they matter, and how you can use them today.

What Are Signals?

In plain English:
A signal is a special reactive value that tells Angular whenever it changes. Think of it like a variable that automatically notifies the system to re-render anything depending on it.

Instead of Angular guessing when something has changed by running change detection across entire components, signals provide direct, explicit reactivity.

Here’s the simplest example:

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

export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.set(this.count() + 1);
  }
}

In the template:

<p>Count: {{ count() }}</p>
<button (click)="increment()">Increment</button>

Notice a few things here:

• count is a signal initialized with 0.
• To read a signal, you call it like a function (count()).
• To update a signal, you call set(newValue) or use helpers like update().

That’s it. No Subject, no BehaviorSubject, no async pipe. Just reactive values, as simple as they should be.

Why Signals Are a Big Deal

1. Fine-Grained Reactivity

With traditional Angular, a single change could trigger a cascade of re-renders across your entire component tree. Signals let Angular know exactly what changed and what needs updating. This means fewer unnecessary updates and better performance, especially in complex apps.

2. Developer Simplicity

Signals eliminate boilerplate. Compare:

• With RxJS, you’d create a BehaviorSubject, subscribe, manage unsubscriptions, and pipe values.
• With Signals, you just… use them. No extra baggage.

3. First-Class Angular Integration

Unlike external libraries, signals are built into Angular. That means they work naturally with templates, lifecycle hooks, and even the upcoming Angular developer tooling.

4. A Stepping Stone Toward Zone-Less Angular

Signals pave the way for Angular to eventually drop its reliance on Zone.js, making the framework leaner and more predictable.

Working with Signals

Updating Signals

Signals give you multiple ways to update values:

count.set(5);          // set a new value
count.update(c => c+1) // update based on previous value

Computed Signals

You can derive new signals from existing ones using computed.

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

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

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

Whenever count changes, doubleCount recalculates automatically.

Effects

Effects let you run side effects whenever a signal changes:

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

effect(() => {
  console.log("Count changed to", count());
});

This is especially useful for logging, API calls, or syncing with browser storage.

Where Should You Use Signals?

Signals shine in:

• Local component state (like form inputs, counters, UI toggles).
• Derived values (computed totals, filters, selections).
• Simplifying RxJS-heavy logic when you don’t need streams.

That said, RxJS isn’t going away. Streams are still invaluable for handling events over time, WebSocket connections, and advanced async patterns. Signals and RxJS complement each other rather than compete.

The Human Side: Why I Love Signals

As developers, we often fight complexity. RxJS is brilliant, but it can feel intimidating for newcomers or overkill for simple cases. Signals feel natural—almost like going back to the basics of just managing variables, but with Angular doing the heavy lifting.

When I first tried them, it was refreshing. I didn’t have to mentally juggle operators or think about teardown logic. I just said, “Here’s my state, here’s how it updates,” and Angular took care of the rest.

It’s one of those features where you think: “This is how it should have been all along.”

Wrapping Up

Angular Signals aren’t just syntactic sugar—they represent a shift in how Angular handles reactivity. They simplify state management, improve performance, and make Angular more approachable to new developers while still powerful for seasoned ones.

If you’re building with Angular v16 or newer, start experimenting with signals today. You might find yourself writing cleaner, faster, and more maintainable code with half the effort