Selectors for derived state in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Angular selector output?

Given this selector that derives a list of completed tasks from the state, what will be the output when the state has two tasks, one completed and one not?

Angular

import { createSelector } from '@ngrx/store';

interface Task { id: number; title: string; completed: boolean; }
interface AppState { tasks: Task[]; }

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

const selectCompletedTasks = createSelector(
  selectTasks,
  (tasks) => tasks.filter(task => task.completed)
);

const state: AppState = {
  tasks: [
    { id: 1, title: 'Learn Angular', completed: true },
    { id: 2, title: 'Write tests', completed: false }
  ]
};

const result = selectCompletedTasks(state);

A [{ id: 1, title: 'Learn Angular', completed: true }]

B [{ id: 2, title: 'Write tests', completed: false }]

C []

D [{ id: 1, title: 'Learn Angular', completed: true }, { id: 2, title: 'Write tests', completed: false }]

💡 Hint

Think about what the filter condition task.completed does.

The selector filters tasks to only those where completed is true. Only the first task meets this condition.

📝 Syntax

intermediate

Which selector code correctly derives the count of completed tasks?

Choose the correct Angular selector code that returns the number of completed tasks from the state.

Angular

interface Task { id: number; completed: boolean; }
interface AppState { tasks: Task[]; }

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

A

const selectCompletedCount = createSelector(
  selectTasks,
  tasks => tasks.filter(t => t.completed).length
);

B

const selectCompletedCount = createSelector(
  selectTasks,
  tasks => tasks.reduce((count, t) => count + (t.completed ? 1 : 0), 0)
);

C

const selectCompletedCount = createSelector(
  selectTasks,
  tasks => tasks.map(t => t.completed).length
);

D

const selectCompletedCount = createSelector(
  selectTasks,
  tasks => tasks.filter(t => t.completed)
);

💡 Hint

Count means a number, not an array.

Option A filters completed tasks and returns the length, which is the count. Option A tries to sum booleans but will not work correctly because booleans are not numbers in this context. Option A returns the length of all tasks, not just completed ones. Option A returns an array, not a count.

🔧 Debug

advanced

Why does this selector cause a runtime error?

Consider this selector code. It throws an error when used. What is the cause?

Angular

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

const selectFirstCompletedTask = createSelector(
  selectTasks,
  (tasks) => tasks.find(task => task.completed).title
);

A The selector should use filter instead of find to avoid errors.

B The selector syntax is invalid because .find cannot be used inside createSelector.

C The selectTasks function must return a copy of tasks, not the original array.

D If no task is completed, tasks.find returns undefined, so accessing .title causes a runtime error.

💡 Hint

What happens if find does not find any matching item?

If no task is completed, find returns undefined. Trying to access .title on undefined causes a runtime error.

🧠 Conceptual

advanced

What is the main benefit of using selectors for derived state in Angular?

Why do Angular developers use selectors to compute derived state instead of computing it directly in components?

A Selectors automatically update the backend database with derived data.

B Selectors memoize results, improving performance by avoiding unnecessary recalculations when inputs don't change.

C Selectors allow components to modify the global state directly.

D Selectors replace the need for services in Angular applications.

💡 Hint

Think about how selectors help with performance and reusability.

Selectors cache their output and only recompute when inputs change, which helps components avoid expensive recalculations and improves app performance.

❓ state_output

expert

What is the output of this nested selector chain?

Given the following selectors and state, what will selectUserCompletedTaskTitles return?

Angular

interface Task { id: number; title: string; completed: boolean; userId: number; }
interface User { id: number; name: string; }
interface AppState { tasks: Task[]; users: User[]; }

const selectTasks = (state: AppState) => state.tasks;
const selectUsers = (state: AppState) => state.users;

const selectCurrentUserId = (state: AppState) => 2;

const selectUserTasks = createSelector(
  selectTasks,
  selectCurrentUserId,
  (tasks, userId) => tasks.filter(task => task.userId === userId)
);

const selectUserCompletedTaskTitles = createSelector(
  selectUserTasks,
  (tasks) => tasks.filter(t => t.completed).map(t => t.title)
);

const state: AppState = {
  tasks: [
    { id: 1, title: 'Task A', completed: true, userId: 1 },
    { id: 2, title: 'Task B', completed: false, userId: 2 },
    { id: 3, title: 'Task C', completed: true, userId: 2 }
  ],
  users: [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
  ]
};

const result = selectUserCompletedTaskTitles(state);

A ['Task B']

B ['Task A', 'Task C']

C ['Task C']

D []

💡 Hint

Filter tasks by current user ID, then by completed status, then get titles.

The current user ID is 2. Tasks for user 2 are Task B (not completed) and Task C (completed). So only 'Task C' is returned.