Control Flow - New Angular 17+ Syntax

Angular 17 introduced a new Control Flow syntax that replaces the structural directives *ngIf, *ngFor, *ngSwitch.

@if - Conditional Rendering

1@if (isLoggedIn) {
2  <p>Welcome, {{ userName }}!</p>
3} @else if (isGuest) {
4  <p>Welcome, Guest!</p>
5} @else {
6  <p>Please log in</p>
7}

Old syntax (still works):

1<p *ngIf="isLoggedIn; else guestTemplate">Welcome!</p>
2<ng-template #guestTemplate>
3  <p>Please log in</p>
4</ng-template>

@for - Iterating Over a Collection

1@for (samurai of samuraiList; track samurai.id) {
2  <div class="samurai-card">
3    <h3>{{ samurai.name }}</h3>
4    <p>Clan: {{ samurai.clan }}</p>
5  </div>
6} @empty {
7  <p>No samurai in the database</p>
8}

Context variables:

1@for (item of items; track item.id; let i = $index; let first = $first; let last = $last) {
2  <div [class.first]="first" [class.last]="last">
3    {{ i + 1 }}. {{ item.name }}
4  </div>
5}

@switch - Choosing a Variant

1@switch (rank) {
2  @case ('master') {
3    <span class="badge master">🏆 Master</span>
4  }
5  @case ('advanced') {
6    <span class="badge advanced">⚔️ Advanced</span>
7  }
8  @case ('beginner') {
9    <span class="badge beginner">🎯 Beginner</span>
10  }
11  @default {
12    <span class="badge">Unknown</span>
13  }
14}

@let - Declaring Variables in Templates

1@let fullName = firstName + ' ' + lastName;
2@let discountedPrice = price * 0.9;
3
4<h2>{{ fullName }}</h2>
5<p>Discounted price: {{ discountedPrice | currency }}</p>