Angular › Angular Signals

What is a computed signal, and how does it automatically stay in sync with the signals it depends on?

Intermediate

Answer

A computed signal derives its value from one or more other signals, and Angular automatically tracks which signals it reads, recalculating the computed value only when one of those dependencies actually changes, without you needing to manually specify a list of dependencies.

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

firstName = signal('John');
lastName = signal('Smith');
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

Real-world example A user profile component automatically keeps a displayed full name in sync using a computed signal, so updating either the first name or last name signal instantly recalculates the correct combined value without any extra code.

Common follow-ups: What happens if a computed signal's calculation is expensive, does it recompute every single time it is read?;Can a computed signal depend on another computed signal?

State Management;RxJS & Observables