Angular Basics — Series 2

Preview — 3 of 10 questions

This template refuses to compile. What is missing, and why does Angular insist on it?

javascript

@for (hero of heroes) {
  <li>{{ hero.name }}</li>
}

ANothing is missing — @for only works inside a <ng-container>

BA track expression: @for (hero of heroes; track hero.id). It is mandatory, because Angular uses it to match items across renders and reuse DOM nodes instead of rebuilding the list

CThe let keyword: @for (let hero of heroes)

DAn imports: [NgFor] entry in the component, which @for still needs under the hood

What does @empty do here?

javascript

@for (task of tasks; track task.id) {
  <li>{{ task.label }}</li>
} @empty {
  <li class="muted">Nothing to do</li>
}

AIt renders once after the last item, as a footer row

BIt renders while tasks is still loading

CIt renders for every item whose label is an empty string

DIt renders when tasks is empty — and only then; the loop block does not render at all

What is user bound to inside the block, and what problem does the alias solve?

javascript

@if (currentUser$ | async; as user) {
  <p>Signed in as {{ user.name }}</p>
}

AThe alias re-subscribes to the observable on every property read, which is why it must be named

Buser holds the value the condition evaluated to, computed once. Without it, every {{ (currentUser$ | async)?.name }} in the block would be a separate subscription and a separate evaluation

Cuser is a signal, and user.name calls it

DThe alias is purely cosmetic — the compiler expands it back to repeated async pipes

Answer all 10 questions (7 more), see explanations for every answer, and track your score.