What Is an Angular Signal and How Do You Use It?

Angular has introduced a new reactivity model called Signals to improve state management and change detection. This lightweight, efficient mechanism makes it easier to track and respond to state changes in your applications without relying solely on Observables or manual change detection.

In this quick guide, you’ll learn what Angular Signals are, why they’re useful, and how to use them in your apps.

What is an Angular Signal?

An Angular Signal is a reactive primitive that holds a value and notifies dependents when that value changes. It’s designed to be simple, predictable, and tightly integrated with Angular’s rendering model.

Key Characteristics:

• Works similarly to a Behavior Subject or a reactive store
• Synchronous and minimal
• Tracks dependencies automatically

How to Create and Use a Signal

To use signals in Angular, you need to import the signal function from @angular/core.

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

// Create a signal

const counter = signal(0);

// Read the value

console.log(counter()); // Output: 0

// Update the value

counter.set(1);

// Increment

counter.update(value => value + 1);

Creating Computed Signals

Use computed() to derive a new signal based on another one:

ts

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

const counter = signal(5);

const double = computed(() => counter() * 2);

console.log(double()); // Output: 10

Whenever counter changes, double recalculates automatically.

Listening to Signal Changes with Effects

Use effect() to perform side effects when a signal changes.

ts

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

const name = signal('Angular');

effect(() => {

console.log(`Name changed to: ${name()}`);

});

name.set('Angular Signals');

Benefits of Using Angular Signals

• Improved performance: Only dependent templates are re-evaluated.
• Simplified reactivity: Less boilerplate than RxJS.
• Cleaner code: Signals replace manual change detection and complex subscriptions.

Signals vs Observables

When to Use Angular Signals

• For component-local state tracking
• In template bindings
• When you want fine-grained reactivity without Observables

Final Thoughts

Angular Signals are a modern and powerful addition to Angular’s toolkit. They provide a cleaner, more intuitive way to manage reactive state, especially for local UI logic. While Observables still have their place for async streams and external data, Signals shine for local reactive logic and fine-grained rendering updates.