HomeChallengesRepsProblemsLeaderboardTake a challenge

Content Projection

A Panel that does not know what goes inside it. ng-content is what React calls children, and select is how you get more than one hole.

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

What you build

  • Panel with a default slot for its content
  • Two named slots, for actions and a footer
  • Split with a left and a right slot
  • Toolbar that can count what was projected into it
  • Every component standalone

Done means

The panel renders anything nested in it, and the named slots pick out the right parts.

How it is graded

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

  1. Panel has a default content slot+25Slots and children
  2. Named slots for actions and footer+25Slots and children
  3. Split projects into two sides+25Slots and children
  4. Toolbar counts what was projected+15Angular signals
  5. Every slot is in place across the three components+10Slots and children

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