HomeChallengesRepsProblemsLeaderboardTake a challenge

Inputs Flow Down

A product card assembled from three standalone components. Nothing has state; everything arrives as an input. The React sprint calls these props.

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

What you build

  • Price with a required amount and a currency that defaults
  • Badge with a required label and a tone that defaults to "neutral"
  • ProductCard built from Price and Badge, not from inline markup
  • Every component standalone, importing exactly what it uses
  • No badge input means no badge in the template at all

Done means

The card is composed of the other two components, and every value on it came from an input.

How it is graded

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

  1. Required inputs where there is no sensible default+20Data flows down
  2. Defaults the caller can override+20Data flows down
  3. The card binds values into its children+25Slots and children
  4. Each standalone component imports what it uses+20Standalone components and inject()
  5. No badge input renders no badge+15Angular control flow

What it teaches

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.

The rest of Angular Components That Fit Together