HomeChallengesRepsProblemsLeaderboardTake a challenge

User Dashboard

The React dashboard, in Angular: fetch on start, handle every state, derive the rest with signals.

Advanced40 min on the clock7 graded checks · 100 pointsAngular SprintPro
Graded by reading your code against the checklist below.

What you build

  • Hold users, loading, error and search in signals
  • Fetch /api/users with HttpClient
  • Derive the filtered list and the active count with computed()
  • Render rows with @for and a track expression
  • Handle loading and error with @if before the table

Done means

It loads, it fails visibly, it filters without recomputing, and rows are tracked.

How it is graded

Published in full, before you start — every point is one of these and there is nothing else.

  1. Hold the state in signals+20Angular signals
  2. Derive the filtered list and the count+20Angular signals
  3. Fetch the users with HttpClient+15Standalone components and inject()
  4. Repeat rows with a track expression+15Angular control flow
  5. Render loading and error, not just the data+15Loading and error states
  6. Make it a standalone component+10Standalone components and inject()
  7. Stop the request if the component is destroyed+5Async and its failure modes

What it teaches

Angular signalsintermediate

A signal is a value that tells the template when it changed, so Angular updates only what actually depends on it — and computed() derives from other signals rather than storing a second copy that can drift.

Standalone components and inject()intermediate

Standalone components declare what they need instead of belonging to an NgModule, and inject() gets a dependency without a constructor parameter — together they are most of what changed in modern Angular.

Async and its failure modesintermediate

Every await can reject; modelling idle, loading, success and error explicitly is what stops a slow network showing a blank screen with no explanation.

The rest of Angular Sprint