Angular Signals Explained

Question

What Are Angular Signals?

Signals are a new reactive primitive in Angular for managing state.

At a high level:

• A signal holds a value

• Angular tracks where that value is read

• When the value changes, Angular updates only what depends on it

No subscriptions. No manual cleanup. No async pipe.

Signals were introduced in Angular 16 and refined further in Angular 17+.
If you’re using Angular 16 or later, you can start using them today.

Why Should You Use Angular Signals?

Signals exist to solve some very real pain points in everyday Angular development.

Why they’re nice:

• Less boilerplate
• No Subject, BehaviorSubject, or .subscribe()
• Automatic change detection
• Angular knows exactly what needs to update
• Better performance by default
• Fewer unnecessary re-renders
• Simpler mental model
• State updates are synchronous and explicit
• Great for UI state
• Counters, toggles, filters, loading flags, selections

If you’ve ever thought:

“This feels like too much code for a simple counter…”

Signals are probably what you’re looking for.

A Simple Real-World Example: Cart Item Count

Let’s keep this very real.

Problem:

You want to show how many items are in a shopping cart and update the UI when users add or remove items.

This is a perfect use case for signals.

Step 1: Create a Service Using Signals

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

@Injectable({ providedIn: 'root' })
export class CartService {
  cartCount = signal(0);

  addItem() {
    this.cartCount.update(count => count + 1);
  }

  removeItem() {
    this.cartCount.update(count => Math.max(0, count - 1));
  }
}

What’s happening here:

signal(0) creates a reactive state value

update() changes the value

Angular automatically tracks where cartCount is used

No RxJS. No subscriptions.

Step 2: Use the Signal in a Component

import { Component } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app-cart',
  template: `
    <h3> Cart Items: {{ cartService.cartCount() }}</h3>
    <button (click)="cartService.addItem()">Add Item</button>
    <button (click)="cartService.removeItem()">Remove Item</button>
  `
})

export class CartComponent {
  constructor(public cartService: CartService) {}
}

Key things to notice:

Signals are read like functions → cartCount()

• No async pipe

• No ngOnDestroy

• No manual change detection

Angular updates the UI automatically when the signal changes.

When You Should Not Use Signals

Signals are powerful but they’re not a replacement for everything.

Avoid signals when:

• You’re working with event streams

• WebSockets

• Live search with debouncing

• Continuous user input

• You rely heavily on RxJS operators

• switchMap, merge, retry, debounceTime

• You’re managing complex global state

• Large apps may still benefit from NgRx or similar libraries

A good rule of thumb:

Signals are great for state. RxJS is great for events. They work best together, not as competitors.

Conclusion

Angular signals make simple things simple again.

They’re especially useful for:

• Local component state

• Shared service state

• UI flags and counters

• Cleaner, more readable templates

If you’re already on Angular 16+, try signals in a small feature first and build from there. You don’t have to rewrite everything - signals fit nicely alongside existing RxJS patterns.