Selectors for derived state in Angular - Mini Project: Build & Apply

Selectors for Derived State in Angular

📖 Scenario: You are building a simple Angular app to manage a list of products in a store. Each product has a name and a price. You want to show the total price of all products combined.

🎯 Goal: Create an Angular standalone component that uses a signal to hold the products list, a signal for a price threshold, and a derived signal (selector) to calculate the total price of products that cost more than the threshold.

📋 What You'll Learn

Create a signal called products with the exact array of objects: [{ name: 'Pen', price: 5 }, { name: 'Notebook', price: 15 }, { name: 'Backpack', price: 50 }]

Create a signal called priceThreshold with the value 10

Create a derived signal called totalExpensive that sums the prices of products with price greater than priceThreshold()

Create a standalone Angular component named ProductTotalComponent that displays the total price from totalExpensive()

💡 Why This Matters

🌍 Real World

Using selectors (derived signals) helps keep your UI in sync with data changes automatically, which is common in modern Angular apps.

💼 Career

Understanding signals and derived state is important for Angular developers to build efficient, reactive user interfaces.

1

Set up the products signal

Create a signal called products with this exact array of objects: [{ name: 'Pen', price: 5 }, { name: 'Notebook', price: 15 }, { name: 'Backpack', price: 50 }]

Angular

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

@Component({
  selector: 'app-product-total',
  standalone: true,
  template: ``,
})
export class ProductTotalComponent {
  // Create the products signal here
}

Need a hint?

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

2

Add the price threshold signal

Add a signal called priceThreshold and set it to the number 10

Angular

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

@Component({
  selector: 'app-product-total',
  standalone: true,
  template: ``,
})
export class ProductTotalComponent {
  products = signal([
    { name: 'Pen', price: 5 },
    { name: 'Notebook', price: 15 },
    { name: 'Backpack', price: 50 }
  ]);
  // Create the priceThreshold signal here
}

Need a hint?

Use signal to create a number variable holding the threshold value.

3

Create the derived signal for total price

Create a derived signal called totalExpensive that calculates the sum of prices of products where the product's price is greater than priceThreshold(). Use products() and priceThreshold() inside the derived signal.

Angular

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

@Component({
  selector: 'app-product-total',
  standalone: true,
  template: ``,
})
export class ProductTotalComponent {
  products = signal([
    { name: 'Pen', price: 5 },
    { name: 'Notebook', price: 15 },
    { name: 'Backpack', price: 50 }
  ]);

  priceThreshold = signal(10);

  // Create the derived signal totalExpensive here
}

Need a hint?

Use a signal with a function that filters and sums prices based on the threshold.

4

Display the total price in the template

Update the component's template to display the text Total Price: followed by the value of totalExpensive(). Use Angular's interpolation syntax {{ }}.

Angular

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

@Component({
  selector: 'app-product-total',
  standalone: true,
  template: `
    
  `,
})
export class ProductTotalComponent {
  products = signal([
    { name: 'Pen', price: 5 },
    { name: 'Notebook', price: 15 },
    { name: 'Backpack', price: 50 }
  ]);

  priceThreshold = signal(10);

  totalExpensive = signal(() => {
    return this.products()
      .filter(product => product.price > this.priceThreshold())
      .reduce((sum, product) => sum + product.price, 0);
  });

  // Update template to show totalExpensive()
}

Need a hint?

Use Angular interpolation {{ totalExpensive() }} inside the template string.