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
}

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
}

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
}

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()
}

Hint

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

Practice

1. What is the main purpose of using createSelector in Angular state management?

easy

A. To dispatch actions to the store

B. To directly modify the state values

C. To compute derived data from the state efficiently

D. To subscribe to HTTP requests

Solution

1. Step 1: Understand what createSelector does

   createSelector is used to create selectors that compute derived data from the state without modifying it.

2. Step 2: Differentiate from other store operations

   Modifying state or dispatching actions are done by reducers and actions, not selectors.

3. Final Answer:

   To compute derived data from the state efficiently -> Option C

4. Quick Check:

   Derived data = createSelector [OK]

Hint: Remember: selectors read and compute, not modify state [OK]

Common Mistakes:

• Confusing selectors with actions or reducers
• Thinking selectors modify state
• Assuming selectors handle side effects

2. Which of the following is the correct syntax to create a selector that derives the total count from a list in the state using createSelector?

easy

A. const selectTotal = createSelector(list => list.length, selectList);

B. const selectTotal = createSelector(selectList, list => list.length);

C. const selectTotal = createSelector(selectList, list => list.count);

D. const selectTotal = createSelector(selectList, list => list.size());

Solution

1. Step 1: Check the order of arguments in createSelector

   The first argument(s) are input selectors, followed by a projector function.

2. Step 2: Verify the projector function logic

   The projector function receives the selected data and returns the derived value. Using list.length correctly gets the count.

3. Final Answer:

   const selectTotal = createSelector(selectList, list => list.length); -> Option B

4. Quick Check:

   Input selectors first, then projector function [OK]

Hint: Input selectors first, projector function last in createSelector [OK]

Common Mistakes:

• Swapping input selectors and projector function order
• Using incorrect property like count or size()
• Calling methods instead of accessing properties

3. Given the following selectors:

const selectItems = (state) => state.items;
const selectCompletedItems = createSelector(selectItems, items => items.filter(item => item.done));

What will selectCompletedItems return if state.items is [{done: true}, {done: false}, {done: true}]?

medium

A. [{done: true}, {done: true}]

B. []

C. [{done: false}]

D. [{done: true}, {done: false}]

Solution

1. Step 1: Understand the input selector

   selectItems returns the full list of items from state.

2. Step 2: Apply the projector function filter

   The projector filters items where item.done is true, so it keeps only those objects.

3. Final Answer:

   [{done: true}, {done: true}] -> Option A

4. Quick Check:

   Filter done=true items = [{done:true}, {done:true}] [OK]

Hint: Filter returns only items matching condition [OK]

Common Mistakes:

• Including false done items in result
• Returning original list without filtering
• Confusing filter condition logic

4. Identify the error in this selector code:

const selectUsers = (state) => state.users;
const selectActiveUsers = createSelector(selectUsers, users => users.active);

medium

A. The projector function incorrectly accesses users.active instead of filtering

B. The input selector should return a property, not the whole state

C. createSelector requires at least two input selectors

D. The selector should be an async function

Solution

1. Step 1: Check the input selector

   selectUsers correctly returns state.users, which is valid.

2. Step 2: Analyze the projector function

   The projector accesses users.active, but users is likely an array, so it should filter or map, not access a property.

3. Final Answer:

   The projector function incorrectly accesses users.active instead of filtering -> Option A

4. Quick Check:

   Projector must handle data type correctly [OK]

Hint: Check if projector matches data type (array vs object) [OK]

Common Mistakes:

• Assuming users is an object, not an array
• Trying to access properties on arrays directly
• Misunderstanding projector function role

5. You want to create a selector that returns the number of completed tasks and the number of pending tasks from state.
Given:

const selectTasks = (state) => state.tasks;

Which of the following createSelector implementations correctly derives this data?

hard

A. const selectTaskCounts = createSelector(selectTasks, tasks => tasks.doneCount)

B. const selectTaskCounts = createSelector(selectTasks, tasks => { completed: tasks.filter(t => t.done).length, pending: tasks.filter(t => !t.done).length });

C. const selectTaskCounts = createSelector(selectTasks, tasks => [tasks.filter(t => t.done).length, tasks.filter(t => !t.done).length]);

D. const selectTaskCounts = createSelector(selectTasks, tasks => ({ completed: tasks.filter(t => t.done).length, pending: tasks.filter(t => !t.done).length }));

Solution

1. Step 1: Check the syntax of the projector function

   const selectTaskCounts = createSelector(selectTasks, tasks => ({ completed: tasks.filter(t => t.done).length, pending: tasks.filter(t => !t.done).length })); returns an object with properties completed and pending correctly using parentheses to return the object literal.

2. Step 2: Identify errors in other options

   const selectTaskCounts = createSelector(selectTasks, tasks => { completed: tasks.filter(t => t.done).length, pending: tasks.filter(t => !t.done).length }); lacks parentheses around the object, causing a syntax error. const selectTaskCounts = createSelector(selectTasks, tasks => [tasks.filter(t => t.done).length, tasks.filter(t => !t.done).length]); returns an array, not an object. const selectTaskCounts = createSelector(selectTasks, tasks => tasks.doneCount) accesses a non-existent property.

3. Final Answer:

   const selectTaskCounts = createSelector(selectTasks, tasks => ({ completed: tasks.filter(t => t.done).length, pending: tasks.filter(t => !t.done).length })); -> Option D

4. Quick Check:

   Use parentheses to return object literals in arrow functions [OK]

Hint: Wrap object in parentheses to return from arrow function [OK]

Common Mistakes:

• Missing parentheses around object literal
• Returning array instead of object
• Accessing undefined properties