aichallengesafrica
Take a challenge
HomeChallengesRepsProblemsLeaderboardTake a challenge

Smart and Dumb

Split a dashboard into the component that injects and derives and the one that only draws. The drawing half must render from inputs alone — that is the test of whether you got it right.

Advanced25 min on the clock5 graded checks · 100 pointsAngular Components That Fit TogetherPro
Graded by reading your code against the checklist below.

What you build

  • StatCard and EmptyState, both driven entirely by inputs
  • summarise(orders) — a plain function, no decorator, no injection
  • DashboardView — presentational, no inject(), no service
  • No rows means EmptyState, not an empty list
  • A container that injects the service, derives the stats and hands over

Done means

DashboardView compiles and renders with fabricated inputs and injects nothing.

How it is graded

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

  1. StatCard and EmptyState render their inputs+15Data flows down
  2. summarise is a plain function+25Container and view
  3. The view takes inputs and injects nothing+25Container and view
  4. No rows renders the empty state+20Container and view
  5. The container injects and derives+15Container and view

What it teaches

The rest of Angular Components That Fit Together

Inputs Flow DownBeginner · 15 minContent ProjectionBeginner · 15 minA List and Its RowIntermediate · 20 minInputs Down, Outputs UpIntermediate · 20 min