Week 6: New Control Flow & Template Syntax

1. @if / @else if / @else

Conditional rendering, block-scoped and readable top to bottom — no more prefixing an attribute with an asterisk.

@if (order().status === 'delivered') {
  <p class="status status--success">Delivered {{ order().deliveredAt | date }}</p>
} @else if (order().status === 'shipped') {
  <p class="status status--info">On its way — tracking #{{ order().trackingNumber }}</p>
} @else if (order().status === 'cancelled') {
  <p class="status status--error">Cancelled</p>
} @else {
  <p class="status status--pending">Processing</p>
}

You can also capture the condition's value with as — handy when the condition is an expensive call or a signal you want to read once per block:

@if (currentUser(); as user) {
  <p>Welcome back, {{ user.name }}</p>
}

2. @for, Track Expressions & Performance

@for requires a track expression — not optional the way trackBy was with *ngFor. It tells Angular how to recognize "this is the same item" across re-renders, even if its position in the array changed.

@for (product of products(); track product.id) {
  <app-product-card [product]="product" />
} @empty {
  <p>No products match your filters.</p>
}

@for also exposes contextual variables you'll use constantly:

@for (item of items(); track item.id; let i = $index, isLast = $last, count = $count) {
  <li [class.is-last]="isLast">
    {{ i + 1 }} of {{ count }}: {{ item.name }}
  </li>
}

3. @switch / @case / @default

For more than two or three branches on the same value, @switch reads better than a chain of @else if:

@switch (user().role) {
  @case ('admin') {
    <app-badge color="red">Admin</app-badge>
  }
  @case ('editor') {
    <app-badge color="blue">Editor</app-badge>
  }
  @case ('viewer') {
    <app-badge color="gray">Viewer</app-badge>
  }
  @default {
    <app-badge color="gray">Unknown</app-badge>
  }
}

Unlike JavaScript's switch, there's no fallthrough to worry about — each @case block is independent, so you never need a stray break.

4. @let for Local Template Variables

@let declares a template-scoped variable — useful for naming an expression you'd otherwise repeat, without introducing a whole @if ... as block just to get a local name.

@let itemCount = cartItems().length;
@let isEmpty = itemCount === 0;

<p>{{ itemCount }} item{{ itemCount === 1 ? '' : 's' }} in cart</p>

@if (isEmpty) {
  <p>Your cart is empty.</p>
}

@let variables are read-only and scoped to the template block they're declared in — you can't reassign one, and a value declared inside an @if block isn't visible outside it.

5. Conditional Rendering & Empty-State Patterns

Combining what you've learned so far, a realistic loading/empty/error/success template looks like this — a pattern you'll see again, built on signals instead of raw booleans, once you meet resource() in Week 16:

@if (isLoading()) {
  <app-spinner />
} @else if (error()) {
  <p class="error">{{ error() }}</p>
} @else {
  @for (result of results(); track result.id) {
    <app-result-row [result]="result" />
  } @empty {
    <p>No results for "{{ query() }}".</p>
  }
}

Notice @empty only fires when the list is genuinely empty — it's distinct from the loading and error states above it, which is exactly the distinction a real search UI needs to make.

6. Migrating from *ngIf/*ngFor

Side by side, the mapping is direct:

<div *ngIf="user; else guestTpl">
  Welcome, {{ user.name }}
</div>
<ng-template #guestTpl>
  <div>Please log in</div>
</ng-template>

<li *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</li>

@if (user) {
  <div>Welcome, {{ user.name }}</div>
} @else {
  <div>Please log in</div>
}

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}

The Angular CLI ships a schematic that does this conversion automatically across an entire project:

ng generate @angular/core:control-flow

It's worth running once on a real project and reading the diff — you'll see every pattern from this lesson applied at scale, which cements the mapping far better than flashcards would.

7. Hands-on Exercise

8. Knowledge Check

Four quick questions. Expand each to check your answer.