Home Challenges Reps Problems Leaderboard Take a challenge

A List and Its Row

The same table as the React sprint. One component owns the list, another owns a row, and the empty case is a real state rather than a blank table.

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

Row taking a user input
UserList building the table out of Rows
An empty list renders the empty label, not an empty table
The caption says how many there are
Every row tracked by id

Done means

The table is built from Row components and an empty list says so in a sentence.

How it is graded

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

One row per user, rendered by Row+30Lists and their rows
Rows are tracked by id+15Angular control flow
An empty list renders the empty state+25Lists and their rows
The caption counts them+20Lists and their rows
UserList imports Row+10Standalone components and inject()

What it teaches

Lists and their rowsbeginner

A list component owns the collection and a row component owns one item, and the empty case is a state to render rather than a blank space where a table should be.

Angular control flowbeginner

The @if and @for blocks replaced *ngIf and *ngFor, and the track expression is what stops Angular rebuilding every row when one of them changes.

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

Inputs Flow DownBeginner · 15 min Content ProjectionBeginner · 15 min Inputs Down, Outputs UpIntermediate · 20 min Smart and DumbAdvanced · 25 min