Backend interview prep

Start

Angular Computed Signals

Learn Angular Computed Signals with practical examples, lazy evaluation, memoization, dependency tracking, architecture diagrams, enterprise use cases, best practices, and interview questions.

Computed Signals are one of the most powerful features of Angular Signals.

They allow you to create derived reactive state without manually updating values.

Instead of writing code to synchronize related state, Angular automatically recalculates computed values whenever their dependencies change.

Computed Signals provide:

  • Automatic dependency tracking
  • Lazy evaluation
  • Memoization (cached results)
  • Better performance
  • Cleaner code
  • Fine-grained reactivity

They are widely used in modern Angular applications and are becoming a popular Angular interview topic.

Table of Contents

  • What are Computed Signals?
  • Why Use Computed Signals?
  • Architecture
  • Creating Computed Signals
  • Dependency Tracking
  • Lazy Evaluation
  • Memoization
  • Dynamic Dependencies
  • Enterprise Banking Example
  • Performance Best Practices
  • Common Mistakes
  • Top 10 Interview Questions
  • Summary

What are Computed Signals?

A Computed Signal derives its value from one or more other Signals.

Unlike writable Signals, Computed Signals are read-only.

Whenever a dependency changes, Angular automatically recalculates the computed value when it is next read.

Computed Signal Architecture

flowchart LR

PriceSignal

TaxSignal

DiscountSignal

PriceSignal --> Computed

TaxSignal --> Computed

DiscountSignal --> Computed

Computed --> Component

Component --> UI

Why Use Computed Signals?

Without Computed Signals

  • Manual synchronization
  • Duplicate logic
  • More bugs
  • Harder maintenance

With Computed Signals

  • Automatic updates
  • No synchronization code
  • Better readability
  • Less boilerplate
  • Better performance

Creating a Computed Signal

import {

signal,
computed

} from '@angular/core';

price = signal(100);

tax = signal(10);

total = computed(() =>

this.price() + this.tax()

);

Whenever either price or tax changes, total() automatically reflects the latest value.

Reading a Computed Signal

Computed Signals are read like regular Signals.

console.log(

this.total()

);

Template

<p>

Total: {{ total() }}

</p>

No subscriptions or Async Pipe are required.

Dependency Tracking

Angular automatically tracks which Signals are read inside a Computed Signal.

firstName = signal('John');

lastName = signal('Doe');

fullName = computed(() =>

`${this.firstName()} ${this.lastName()}`

);

If firstName changes,

fullName is automatically updated.

If lastName changes,

fullName is also updated.

No manual dependency registration is needed.

Dependency Architecture

flowchart TD

FirstName

LastName

FirstName --> FullName

LastName --> FullName

FullName --> Component

Component --> UI

Lazy Evaluation

Computed Signals are lazy.

They are only evaluated when someone reads their value.

count = signal(5);

double = computed(() => {

console.log('Computing...');

return this.count() * 2;

});

If double() is never called, the computation never runs.

This avoids unnecessary work.

Lazy Evaluation Flow

sequenceDiagram

participant Component

participant Computed

participant Signal

Component->>Computed: Read total()

Computed->>Signal: Read dependencies

Signal-->>Computed: Current values

Computed-->>Component: Calculated result

Memoization

Computed Signals cache their most recent result.

price = signal(500);

tax = signal(50);

total = computed(() =>

this.price() + this.tax()

);

If neither dependency changes,

calling total() repeatedly returns the cached value instead of recalculating.

Benefits

  • Faster rendering
  • Reduced CPU usage
  • Improved scalability

Dynamic Dependencies

Computed Signals only track the Signals that are actually read during execution.

showDiscount = signal(true);

price = signal(100);

discount = signal(20);

total = computed(() => {

if (this.showDiscount()) {

return this.price() - this.discount();

}

return this.price();

});

When showDiscount() is false, discount() is not read, so it is not treated as an active dependency for that evaluation.

Writable vs Computed Signals

Feature Writable Signal Computed Signal
Stores State ✅ Yes ❌ No
Derived Value ❌ No ✅ Yes
set() ✅ Yes ❌ No
update() ✅ Yes ❌ No
Readonly ❌ No ✅ Yes
Automatic Calculation ❌ No ✅ Yes

Multiple Computed Signals

Computed Signals can build on other Computed Signals.

subtotal = computed(() =>

this.price() * this.quantity()

);

tax = computed(() =>

this.subtotal() * 0.08

);

grandTotal = computed(() =>

this.subtotal() + this.tax()

);

Angular automatically maintains the dependency graph.

Computed Dependency Graph

flowchart TD

Price

Quantity

Price --> Subtotal

Quantity --> Subtotal

Subtotal --> Tax

Subtotal --> GrandTotal

Tax --> GrandTotal

GrandTotal --> UI

Enterprise Banking Example

Online Banking Dashboard

Signals

  • Account Balance
  • Interest Rate
  • Loan Amount
  • Monthly Payment

Computed Signals

  • Total Assets
  • Net Worth
  • Monthly Interest
  • Available Credit
  • Portfolio Value

Architecture

flowchart TD

Balance

Investments

Loans

Balance --> NetWorth

Investments --> NetWorth

Loans --> NetWorth

NetWorth --> Dashboard

Benefits

  • Automatic calculations
  • No manual synchronization
  • Consistent financial values
  • Better performance

Computed vs Effect

Computed Effect
Produces derived state Performs side effects
Returns a value Returns nothing
Lazy Runs when dependencies change
Memoized Not memoized
Readonly Used for logging, persistence, analytics

Use:

  • computed() → Derived values
  • effect() → Logging, local storage, analytics, API integration

Performance Best Practices

Practice Benefit
Use computed() for derived state Cleaner architecture
Keep computations fast Better responsiveness
Avoid unnecessary dependencies Fewer recalculations
Break large computations into smaller ones Easier maintenance
Prefer immutable updates Predictable behavior
Let Angular handle caching Better performance

Common Mistakes

Updating a Computed Signal

❌ Wrong

total.set(100);

Computed Signals are readonly.

Using Effects for Derived Values

❌ Wrong

effect(() => {

this.total.set(

this.price() + this.tax()

);

});

✅ Correct

total = computed(() =>

this.price() + this.tax()

);

Expensive Computations

Avoid performing heavy processing inside a single Computed Signal.

Instead, split complex calculations into smaller computed values or move expensive business logic into services when appropriate.

Duplicating State

❌ Wrong

total = signal(0);

updateTotal(){

this.total.set(

this.price() + this.tax()

);

}

✅ Correct

total = computed(() =>

this.price() + this.tax()

);

Ignoring Dependency Relationships

Only reference the Signals that are required.

Smaller dependency graphs lead to fewer recalculations.

Best Practices

  • Use Computed Signals for derived values.
  • Keep Computed Signals pure.
  • Avoid side effects inside computed().
  • Use effect() for logging and persistence.
  • Keep computations lightweight.
  • Avoid duplicating derived state.
  • Break large calculations into smaller computed values.
  • Prefer immutable updates.
  • Expose computed values instead of manually synchronized state.
  • Write unit tests for derived logic.

Advantages

Feature Benefit
Automatic Dependency Tracking Less code
Lazy Evaluation Better performance
Memoization Cached results
Readonly Safer state management
Fine-Grained Reactivity Efficient UI updates
Enterprise Ready Scalable architecture

Top 10 Computed Signals Interview Questions

1. What is a Computed Signal?

Answer

A Computed Signal is a read-only reactive value derived from one or more other Signals.

2. How do you create a Computed Signal?

Answer

total = computed(() =>

this.price() + this.tax()

);

3. Can a Computed Signal be updated using set()?

Answer

No. Computed Signals are read-only and cannot be modified directly.

4. What is automatic dependency tracking?

Answer

Angular automatically tracks every Signal read during a Computed Signal's execution and recalculates the value when those dependencies change.

5. What is lazy evaluation?

Answer

Computed Signals are evaluated only when their value is read, avoiding unnecessary work.

6. What is memoization?

Answer

Computed Signals cache their most recent value and reuse it until one of their dependencies changes.

7. What is the difference between computed() and effect()?

Answer

computed() creates derived state and returns a value, while effect() performs side effects such as logging or persistence and does not produce derived state.

8. Can one Computed Signal depend on another?

Answer

Yes. Computed Signals can build on other Computed Signals, allowing complex dependency graphs.

9. When should you use Computed Signals?

Answer

Use them for totals, formatted values, derived UI state, filters, statistics, and any value that can be calculated from existing Signals.

10. What are the benefits of Computed Signals?

Answer

They reduce boilerplate, eliminate manual synchronization, provide automatic dependency tracking, support lazy evaluation and memoization, and improve application performance.

Interview Cheat Sheet

Requirement Solution
Derived State computed()
Read Value total()
Update Value Update source Signals
Readonly State Computed Signal
Side Effects effect()
Automatic Dependencies Built-in
Lazy Evaluation Yes
Memoization Yes
Manual Subscription Not Required
Best Use Case Calculated UI values

Summary

Computed Signals simplify reactive programming in Angular by automatically deriving values from other Signals. They provide automatic dependency tracking, lazy evaluation, memoization, and readonly behavior, making them ideal for calculated UI state such as totals, filters, formatted values, and financial metrics. By replacing manually synchronized state with Computed Signals, Angular applications become cleaner, more maintainable, and more performant.

Key Takeaways

  • ✔ Computed Signals derive values from other Signals.
  • ✔ They are readonly and cannot be updated directly.
  • ✔ Angular automatically tracks dependencies.
  • ✔ Computations are lazy and run only when needed.
  • ✔ Results are memoized for better performance.
  • ✔ Use computed() instead of manual synchronization.
  • ✔ Keep Computed Signals pure and free of side effects.
  • ✔ Use effect() for side effects, not derived state.
  • ✔ Computed Signals support complex dependency graphs.
  • ✔ They are an important modern Angular interview topic.

Next Article

➡️ 83-Angular-Effects-QA.md