angular
/

Angular Signals – Modern Fine-Grained Reactivity

Last Sync: Today

On this page

5
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

angular

Angular Signals – Modern Fine-Grained Reactivity

What are Signals?

A Signal is a wrapper around a value that notifies consumers when that value changes. Unlike RxJS Observables, which are streams of data that require subscriptions, Signals are synchronous and 'glitch-free'. As an Architect, you should view Signals as the primary way to manage local and shared state in modern Angular apps. They enable 'Zoneless' applications, where Angular no longer relies on Zone.js to detect changes, leading to massive performance gains and smaller bundle sizes.

  1. The Three Core Primitives

There are three primary functions that make up the Signals API.

  • signal(): Creates a 'Writable Signal'. You can change its value directly using .set() or .update().
  • computed(): Creates a read-only signal that derives its value from other signals. It is lazily evaluated and memoized (it only re-calculates if its dependencies change).
  • effect(): A function that runs whenever the signals it reads change. Use this for side effects like logging, manual DOM manipulation, or syncing with LocalStorage.

  1. Basic Implementation

In your component, you define a signal and call it as a function in your template to read its current value. Angular automatically tracks this dependency.

TypeScriptRead-only
1
import { Component, signal, computed, effect } from '@angular/core';

@Component({ ... })
export class ProjectCounterComponent {
  // 1. Writable Signal
  count = signal(0);

  // 2. Computed Signal (auto-updates when count changes)
  doubleCount = computed(() => this.count() * 2);

  constructor() {
    // 3. Effect for side effects
    effect(() => {
      console.log(`The current count is: ${this.count()}`);
    });
  }

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

  1. Signals vs. RxJS

As a Lead, it's important to know when to use which. Signals are for State (values over time), while RxJS is for Events and Asynchronous Streams (API calls, web sockets, complex timing).

FeatureSignalsRxJS Observables
NatureSynchronous / StateAsynchronous / Streams
ConsumerFunctional call: count()Subscription: .subscribe()
CleanupAutomaticManual (Unsubscribe)
PerformanceFine-grained (targeted)Coarse-grained (Zone.js)
Best ForLocal state, derived valuesHTTP calls, Event logic

Reactivity Evolution

Signals represent a shift from 'Push-based' (RxJS) to 'Producer-Consumer' based reactivity, reducing the complexity of the change detection cycle.

Test Your Knowledge

Q1
of 3

Which function is used to create a read-only signal that depends on the value of another signal?

A
signal()
B
effect()
C
computed()
D
derive()
Q2
of 3

What is the correct way to read the current value of a signal named 'total' in a template?

A
{{ total }}
B
{{ total() }}
C
{{ total.value }}
D
{{ *total }}
Q3
of 3

Which signal primitive should be used to sync a value with LocalStorage whenever it changes?

A
signal()
B
computed()
C
effect()
D
patchValue()

Frequently Asked Questions

Do I need to unsubscribe from a Signal?

No. Signals do not use subscriptions in the RxJS sense. Angular automatically tracks where a signal is used and cleans up the dependency when the component is destroyed.

Can I use Signals with the HttpClient?

HttpClient still returns Observables. However, you can easily convert them using the 'toSignal()' utility. This allows you to fetch data asynchronously but treat it as a reactive signal in your UI logic.

Are Signals replacing NgRx?

Not exactly. NgRx has introduced '@ngrx/signals', a lightweight state management library built on top of Signals. You can use Signals for local component state and NgRx for complex global state.

Previous

angular ngrx

Next

angular testing

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.