HomeChallengesRepsProblemsLeaderboardTake a challenge

Inputs Down, Outputs Up

A search box, a count and a list that must always agree. Angular has an answer React does not: the change comes back up as an output, not as a callback prop.

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

What you build

  • SearchInput taking a value input and emitting an output
  • ResultCount taking shown and total
  • Results taking the filtered list
  • A page holding the query and passing it to all three
  • The filtered list derived with computed, never stored

Done means

One writable signal, held above all three, and the count always matches the list.

How it is graded

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

  1. SearchInput takes a value in and emits changes out+25Lifting state up
  2. The input holds no state of its own+20Lifting state up
  3. ResultCount reads shown of total+15Data flows down
  4. The page owns the query and passes it down+25Lifting state up
  5. The filtered list is computed, not stored+15Angular signals

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.

The rest of Angular Components That Fit Together