Computed signals for derived values in Angular - Mini Project: Build & Apply

Computed signals for derived values

📖 Scenario: You are building a simple Angular standalone component that tracks the number of items in a shopping cart and calculates the total price dynamically.

🎯 Goal: Create an Angular standalone component that uses signals to store the cart items and a computed signal to calculate the total price whenever the cart changes.

📋 What You'll Learn

Create a signal to hold the cart items as an array of objects with name and price properties

Create a computed signal that calculates the total price by summing the prices of all items in the cart

Display the total price in the component template

Use Angular 17+ standalone component syntax with signals and computed signals

💡 Why This Matters

🌍 Real World

This pattern is common in shopping cart features where the total price depends on the items selected and updates automatically as users add or remove products.

💼 Career

Understanding Angular signals and computed signals is essential for building reactive, efficient, and maintainable user interfaces in modern Angular applications.

1

Set up the cart items signal

Create a standalone Angular component named CartComponent. Inside it, create a signal called cartItems initialized with an array containing these exact objects: { name: 'Book', price: 12 }, { name: 'Pen', price: 3 }, and { name: 'Notebook', price: 7 }.

Angular

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

@Component({
  selector: 'app-cart',
  standalone: true,
  template: ``,
})
export class CartComponent {
  // Create the cartItems signal here
}

Hint

Use signal from Angular to create a reactive variable holding the array of items.

2

Create a computed signal for total price

Inside the CartComponent, create a computed signal called totalPrice that calculates the sum of the price of all items in cartItems(). Use the computed function from Angular.

Angular

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

@Component({
  selector: 'app-cart',
  standalone: true,
  template: ``,
})
export class CartComponent {
  cartItems = signal([
    { name: 'Book', price: 12 },
    { name: 'Pen', price: 3 },
    { name: 'Notebook', price: 7 }
  ]);

  // Create the totalPrice computed signal here
}

Hint

Use computed to create a reactive value that recalculates when cartItems changes.

3

Display the total price in the template

Update the component's template to display the text Total Price: followed by the value of totalPrice(). Use Angular's interpolation syntax inside the template property.

Angular

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

@Component({
  selector: 'app-cart',
  standalone: true,
  template: `
    
  `,
})
export class CartComponent {
  cartItems = signal([
    { name: 'Book', price: 12 },
    { name: 'Pen', price: 3 },
    { name: 'Notebook', price: 7 }
  ]);

  totalPrice = computed(() => this.cartItems().reduce((sum, item) => sum + item.price, 0));
}

Hint

Use Angular interpolation {{ }} to show the computed signal value in the template.

4

Add a button to add a new item and update total price

Add a button with the text Add Pencil below the total price. When clicked, it should add a new item { name: 'Pencil', price: 2 } to the cartItems signal array. Use the update method on cartItems inside a method called addPencil(). Bind the button's (click) event to addPencil().

Angular

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

@Component({
  selector: 'app-cart',
  standalone: true,
  template: `
    Total Price: {{ totalPrice() }}
    
  `,
})
export class CartComponent {
  cartItems = signal([
    { name: 'Book', price: 12 },
    { name: 'Pen', price: 3 },
    { name: 'Notebook', price: 7 }
  ]);

  totalPrice = computed(() => this.cartItems().reduce((sum, item) => sum + item.price, 0));

  // Add addPencil method here
}

Hint

Use the update method on the signal to add a new item immutably. Bind the button click event to the method.

Practice

1. What is the main purpose of a computed signal in Angular's signal system?

easy

A. To replace all signals with a single global state

B. To store static data that never changes

C. To automatically update a value based on other signals when they change

D. To manually trigger UI updates

Solution

1. Step 1: Understand what computed signals do

   Computed signals derive their value from other signals and update automatically when those signals change.

2. Step 2: Compare options with this behavior

   Only To automatically update a value based on other signals when they change describes automatic updates based on dependencies, which matches computed signals.

3. Final Answer:

   To automatically update a value based on other signals when they change -> Option C

4. Quick Check:

   Computed signals = auto-update derived values [OK]

Hint: Computed signals auto-update when dependencies change [OK]

Common Mistakes:

• Thinking computed signals store static data
• Confusing manual updates with automatic updates
• Assuming computed signals replace all signals

2. Which of the following is the correct syntax to create a computed signal in Angular?

easy

A. const total = computed(() => price() + tax());

B. const total = signal(() => price + tax);

C. const total = computed(price + tax);

D. const total = signal(price() + tax());

Solution

1. Step 1: Recall computed signal syntax

   Computed signals use computed(() => ...) with a function returning the derived value.

2. Step 2: Check each option

   const total = computed(() => price() + tax()); correctly uses computed(() => price() + tax()). const total = signal(() => price + tax); wrongly uses signal and no function. const total = computed(price + tax); misses the function wrapper. const total = signal(price() + tax()); uses signal instead of computed.

3. Final Answer:

   const total = computed(() => price() + tax()); -> Option A

4. Quick Check:

   Computed syntax = computed(() => value) [OK]

Hint: Use computed(() => ...) with a function for derived values [OK]

Common Mistakes:

• Using signal() instead of computed() for derived values
• Passing expressions directly without a function
• Not calling dependent signals as functions

3. Given the code below, what will be logged after count.set(5) is called?

const count = signal(0);
const double = computed(() => count() * 2);

console.log(double());
count.set(5);
console.log(double());

medium

A. 0 then 10

B. 0 then 0

C. NaN then 10

D. Error at runtime

Solution

1. Step 1: Evaluate initial values

   Initially, count is 0, so double() returns 0 * 2 = 0.

2. Step 2: After count.set(5)

   Setting count to 5 updates double automatically. Calling double() now returns 5 * 2 = 10.

3. Final Answer:

   0 then 10 -> Option A

4. Quick Check:

   Initial double=0, after update=10 [OK]

Hint: Computed updates automatically after signal changes [OK]

Common Mistakes:

• Assuming computed does not update after set()
• Forgetting to call signals as functions
• Expecting errors due to missing subscriptions

4. Identify the error in the following code snippet using computed signals:

const price = signal(100);
const tax = signal(0.1);
const total = computed(() => price + tax * price);

console.log(total());

medium

A. Computed signals cannot use arithmetic operations

B. Signals must be called as functions inside computed

C. Signals cannot be used inside computed

D. Missing initial value for tax signal

Solution

1. Step 1: Check how signals are accessed

   Signals are functions and must be called with () to get their current value.

2. Step 2: Analyze the computed expression

   The expression uses price and tax directly without calling them, so it uses the signal objects, not their values.

3. Final Answer:

   Signals must be called as functions inside computed -> Option B

4. Quick Check:

   Access signals with () inside computed [OK]

Hint: Always call signals as functions inside computed [OK]

Common Mistakes:

• Using signal variables directly without ()
• Thinking computed disallows arithmetic
• Ignoring signal initial values

5. You want to create a computed signal that returns the full name by combining two signals: firstName and lastName. Which code correctly updates the full name when either signal changes and avoids unnecessary recomputations?

hard

A. const fullName = computed(() => firstName() + lastName());

B. const fullName = signal(`${firstName()} ${lastName()}`);

C. const fullName = computed(() => firstName + ' ' + lastName);

D. const fullName = computed(() => `${firstName()} ${lastName()}`);

Solution

1. Step 1: Understand the goal

   The computed signal should combine firstName and lastName signals and update automatically when either changes.

2. Step 2: Evaluate each option

   const fullName = computed(() => `${firstName()} ${lastName()}`); correctly calls both signals as functions and concatenates with a space. const fullName = signal(`${firstName()} ${lastName()}`); uses signal which won't update automatically. const fullName = computed(() => firstName + ' ' + lastName); uses signal variables directly without calling them. const fullName = computed(() => firstName() + lastName()); concatenates without space.

3. Final Answer:

   const fullName = computed(() => `${firstName()} ${lastName()}`); -> Option D

4. Quick Check:

   Call signals with () and combine with space [OK]

Hint: Use computed with template literals calling signals () [OK]

Common Mistakes:

• Using signal() instead of computed() for derived values
• Not calling signals as functions
• Forgetting space between names