Angular 9 🅰️ Modern Template Control Flow — @if, @for, @switch, @let - KandZ

Angular 17 introduced a block syntax for control flow — @if, @for, @switch, and @let — that replaces the old *ngIf, *ngFor, and *ngSwitch directives. The new syntax is built into the template language itself, so it doesn’t need CommonModule imports, it’s faster at runtime, and it reads more like code. Everything the structural directives did, the block syntax does — cleaner, more consistently, and with better type-checking.

Key point: @if, @for, and @switch are language features, not directives. They’re parsed by Angular’s template compiler directly, which means no imports, no <ng-template> expansion to reason about, and better error messages. @let is a bonus — a way to declare a local template variable from an expression. Together they’re the modern way to shape a view.

Why the new syntax exists

The old structural directives worked, but they carried historical baggage.

Problems with *ngIf / *ngFor / *ngSwitch:

Required CommonModule in every standalone component
The asterisk hid a <ng-template> expansion that confused newcomers
You couldn’t stack two on one element
*ngIf="x; else y" and *ngFor="let a of b; trackBy: fn" had awkward micro-syntax
Error messages pointed at the expanded template, not your source
No equivalent of else if — chaining required nested <ng-template> blocks

The block syntax fixes all of these. It’s not a wrapper around directives — it’s a first-class part of the template language.

Side by side:

<!-- Old -->
<div *ngIf="user; else noUser">Hello, {{ user.name }}</div>
<ng-template #noUser>No user.</ng-template>

<!-- New -->
@if (user) {
  <div>Hello, {{ user.name }}</div>
} @else {
  <div>No user.</div>
}

The new form is closer to actual code, has no asterisk, and doesn’t need a template reference for the else branch.

Why a language change: Angular’s team could have kept improving the directives, but the template language was the right place. Control flow is syntax, not behavior — it belongs in the parser, not in a library. That decision also unlocked runtime performance wins and better tooling.

`@if` — conditional rendering

@if renders a block when a condition is truthy. It supports @else if chains and @else fallbacks.

export class UserComponent {
  user: { name: string; role: 'admin' | 'user' } | null = null;
  loading = false;
  error: string | null = null;
}

@if (loading) {
  <p>Loading...</p>
} @else if (error) {
  <p>Error: {{ error }}</p>
} @else if (user) {
  <p>Welcome, {{ user.name }}</p>
} @else {
  <p>Please log in.</p>
}

Exactly one branch renders. The conditions are evaluated top to bottom — the first truthy one wins.

No asterisk, no template reference, no CommonModule. The syntax is a plain expression in parentheses, followed by a block in braces.

What changed from *ngIf:

Old	New
`*ngIf="cond"`	`@if (cond) { ... }`
`*ngIf="cond; else tpl"`	`@if (cond) { ... } @else { ... }`
nested `*ngIf` chains	`@else if (cond) { ... }`
`<ng-template #ref>` for else	`@else { ... }` inline

Truthy/falsy: Same rules as *ngIf — any truthy value renders the block, any falsy value skips it. 0, '', null, undefined, NaN, false are all falsy.

Narrowing: Inside the block, TypeScript narrows the condition. If you write @if (user), then user is non-null inside — no ?. needed.

@if (user) {
  <p>{{ user.name }}</p>  <!-- user is User, not User | null -->
}

That’s a real improvement over *ngIf — the template type-checker understands the control flow.

Why narrowing matters: Without it, every property access on a possibly-null value needs ?. or a pipe. With @if, the template checker knows the block only runs when the condition was truthy, so it tightens the type.

`@for` — repeating elements

@for repeats a block for each item in a collection. Its syntax is different from *ngFor — the track clause is required, not optional.

export class ListComponent {
  users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Carol' }
  ];
}

<ul>
  @for (user of users; track user.id) {
    <li>{{ user.name }}</li>
  }
</ul>

Two things to notice. First, the shape: @for (item of collection; track expression) { ... }. Second, track is mandatory — Angular refuses to compile @for without it.

Why track is required: Angular’s team decided that the performance cost of forgetting trackBy was too high. Making it mandatory forces developers to think about identity every time. It’s a deliberate choice.

The track expression: Usually a unique identifier — track user.id, track item.sku, track $index for simple arrays.

@for (item of items; track $index) {
  <li>{{ item }}</li>
}

$index is fine for static lists. For dynamic lists, use a real ID.

Implicit variables: @for exposes the same loop variables as *ngFor, but with $ prefixes:

Variable	Meaning
`$index`	Zero-based position
`$count`	Total number of items
`$first`	First item?
`$last`	Last item?
`$odd`	Odd index?
`$even`	Even index?

@for (user of users; track user.id; let i = $index, isLast = $last) {
  <li>{{ i + 1 }}. {{ user.name }} {{ isLast ? '(last)' : '' }}</li>
}

@empty block: @for has a built-in empty state — no more *ngIf="items.length; else empty" dance.

@for (user of users; track user.id) {
  <li>{{ user.name }}</li>
} @empty {
  <li>No users found.</li>
}

If users is empty, the @empty block renders. If not, the loop renders.

Why @empty exists: The “list or empty state” pattern was so common that Angular baked it in. It removes a wrapper element and a template reference from every list in every app.

`@switch` — picking one branch

@switch renders exactly one branch based on a value.

export class StatusComponent {
  status: 'loading' | 'success' | 'error' = 'loading';
}

@switch (status) {
  @case ('loading') {
    <p>Loading...</p>
  }
  @case ('success') {
    <p>Done!</p>
  }
  @case ('error') {
    <p>Something went wrong.</p>
  }
  @default {
    <p>Unknown status.</p>
  }
}

The shape is close to a switch statement in JavaScript. No [ngSwitch] binding on a container, no asterisks on the branches — the whole thing is one block.

Differences from *ngSwitch:

Old	New
`[ngSwitch]="x"` on container	`@switch (x) { ... }`
`*ngSwitchCase="'a'"`	`@case ('a') { ... }`
`*ngSwitchDefault`	`@default { ... }`

Comparison: @switch uses === for case matching. Strings, numbers, and booleans work cleanly. Objects and arrays won’t match unless they’re the same reference — the same rule as a JS switch.

When to use @switch vs @if:

@if — two branches
@if/else if chain — three to four branches
@switch — five or more branches, or when a single value picks the outcome

@switch is clearer when one value drives the choice.

Why no fallthrough: Angular’s @switch doesn’t fall through like JS switch. Each @case is independent — there’s no break to forget. That removes a classic source of bugs.

`@let` — declaring a local template variable

@let declares a local variable inside the template, bound to an expression.

export class UserComponent {
  user = { firstName: 'Alice', lastName: 'Johnson', age: 30 };
}

@let fullName = user.firstName + ' ' + user.lastName;
@let isAdult = user.age >= 18;

<p>{{ fullName }}</p>
<p>{{ isAdult ? 'Adult' : 'Minor' }}</p>

Each @let creates a variable usable anywhere below it in the template. The expression is evaluated on every change detection cycle — same as interpolation.

Why @let is useful:

Avoid repeating expressions. Write user.firstName + ' ' + user.lastName once, use fullName multiple times.
Narrow types. @let u = user! or use @if narrowing to declare a non-null local.
Split complex expressions. Break a long interpolation into readable steps.
Cache slightly-expensive computations. The value is captured, so it’s not recomputed for each use.

Scope: A @let is visible from its declaration to the end of the enclosing block. Inside an @if, it’s only visible inside that @if.

@if (user) {
  @let name = user.name;
  <p>{{ name }}</p>
} @else {
  <!-- name is not visible here -->
  <p>No user.</p>
}

Not the same as a property: @let doesn’t create component state. It’s a template-local alias. It can’t be assigned to — it’s read-only.

Example with narrowing:

@let u = user;
@if (u) {
  <p>{{ u.name }}</p>
}

Or, more usefully, right inside a branch:

@if (user) {
  @let displayName = user.nickname ?? user.name;
  <h2>{{ displayName }}</h2>
  <p>{{ displayName }} has {{ user.followers }} followers.</p>
}

displayName is computed once and reused.

Why @let was added: The template expression language is expression-only — no statements, no assignments. That’s a safety feature, but it means you can’t write let x = expr the way you would in code. @let gives you the missing piece: a way to name an intermediate value without adding a component property.

Migrating from `ngIf` / `ngFor` / `*ngSwitch`

Angular ships an automated migration that converts the old directives to the new syntax.

ng generate @angular/core:control-flow

The schematic walks every template and rewrites:

<!-- Before -->
<div *ngIf="user">...</div>
<div *ngIf="user; else noUser">...</div>
<ng-template #noUser>...</ng-template>
<li *ngFor="let u of users; trackBy: trackById">...</li>
<div [ngSwitch]="status">
  <p *ngSwitchCase="'a'">A</p>
  <p *ngSwitchDefault>B</p>
</div>

<!-- After -->
@if (user) { ... }
@if (user) { ... } @else { ... }
@for (u of users; track u.id) { <li>...</li> }
@switch (status) {
  @case ('a') { <p>A</p> }
  @default { <p>B</p> }
}

The schematic handles trackBy by inlining the function body or asking you to provide a track expression. It doesn’t delete CommonModule imports automatically — do that yourself once nothing else needs them.

Why migrate: The new syntax is faster at runtime, easier to read, and eliminates the CommonModule import for control-flow-only components. New code should use blocks; old code should be migrated when convenient.

A full example

A component that uses all four features.

The class:

import { Component } from '@angular/core';

interface User {
  id: number;
  name: string;
  nickname: string | null;
  role: 'admin' | 'user' | 'guest';
  active: boolean;
}

@Component({
  selector: 'app-dashboard',
  standalone: true,
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css'
})
export class DashboardComponent {
  loading = false;
  error: string | null = null;

  users: User[] = [
    { id: 1, name: 'Alice', nickname: 'Al', role: 'admin', active: true },
    { id: 2, name: 'Bob', nickname: null, role: 'user', active: false },
    { id: 3, name: 'Carol', nickname: 'C', role: 'guest', active: true }
  ];

  currentStatus: 'loading' | 'ready' | 'error' = 'ready';
}

The template:

<h1>Dashboard</h1>

@switch (currentStatus) {
  @case ('loading') {
    <p>Loading users...</p>
  }
  @case ('error') {
    <p>Error: {{ error }}</p>
  }
  @default {
    <ul>
      @for (user of users; track user.id; let i = $index) {
        @let displayName = user.nickname ?? user.name;
        @let label = user.role === 'admin' ? 'Administrator' : 'Member';
        <li [class.inactive]="!user.active">
          {{ i + 1 }}. {{ displayName }} — {{ label }}
          @if (!user.active) {
            <span>(inactive)</span>
          }
        </li>
      } @empty {
        <li>No users found.</li>
      }
    </ul>
  }
}

The styles:

.inactive {
  color: gray;
}

Notes on the template:

@switch picks the top-level state
@for iterates with track user.id
$index gives the position
@let declares displayName and label inside the loop
@if inside the loop shows a marker for inactive users
@empty handles the no-users case

Each block is self-contained. No imports. No template references. No asterisks.

Why this shape: The new syntax is designed to compose. @switch at the top, @for inside, @let for local aliases, @if for per-item conditionals. The result reads top to bottom without <ng-template> interruptions.

Complete Example Session

# ============================================
# PART 1: GENERATE A COMPONENT
# ============================================

ng generate component dashboard
# [ CREATE src/app/dashboard/dashboard.component.ts ]
# [ CREATE src/app/dashboard/dashboard.component.html ]
# [ CREATE src/app/dashboard/dashboard.component.css ]

# ============================================
# PART 2: WRITE THE CLASS
# ============================================

cat > src/app/dashboard/dashboard.component.ts << 'EOF'
import { Component } from '@angular/core';

interface User {
  id: number;
  name: string;
  nickname: string | null;
  role: 'admin' | 'user';
  active: boolean;
}

@Component({
  selector: 'app-dashboard',
  standalone: true,
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css'
})
export class DashboardComponent {
  users: User[] = [
    { id: 1, name: 'Alice', nickname: 'Al', role: 'admin', active: true },
    { id: 2, name: 'Bob', nickname: null, role: 'user', active: false },
    { id: 3, name: 'Carol', nickname: 'C', role: 'user', active: true }
  ];
}
EOF

# ============================================
# PART 3: WRITE THE TEMPLATE
# ============================================

cat > src/app/dashboard/dashboard.component.html << 'EOF'
<h1>Users</h1>

@if (users.length === 0) {
  <p>No users yet.</p>
} @else {
  <ul>
    @for (user of users; track user.id; let i = $index) {
      @let displayName = user.nickname ?? user.name;
      <li [class.inactive]="!user.active">
        {{ i + 1 }}. {{ displayName }}
        @if (!user.active) {
          <span>(inactive)</span>
        }
      </li>
    } @empty {
      <li>Empty.</li>
    }
  </ul>
}
EOF

# ============================================
# PART 4: ADD A SWITCH
# ============================================

cat > src/app/status/status.component.ts << 'EOF'
import { Component } from '@angular/core';

@Component({
  selector: 'app-status',
  standalone: true,
  template: `
    @switch (status) {
      @case ('loading') { <p>Loading...</p> }
      @case ('success') { <p>Done!</p> }
      @case ('error') { <p>Error!</p> }
      @default { <p>Unknown.</p> }
    }
  `
})
export class StatusComponent {
  status: 'loading' | 'success' | 'error' | 'idle' = 'loading';
}
EOF

# ============================================
# PART 5: SERVE
# ============================================

ng serve
# [ Local:   http://localhost:4200/ ]

Quick Reference

Block Syntax Summary

Block	Purpose
`@if (cond) { }`	Conditional
`@else if (cond) { }`	Additional branch
`@else { }`	Fallback
`@for (item of items; track expr) { }`	Loop
`@empty { }`	Empty-state for `@for`
`@switch (value) { }`	Multi-branch
`@case (val) { }`	One case
`@default { }`	Fallback case
`@let name = expr;`	Local template variable

`@if` Forms

Form	Meaning
`@if (cond) { ... }`	Render when truthy
`@else if (cond) { ... }`	Additional condition
`@else { ... }`	Fallback

`@for` Loop Variables

Variable	Meaning
`$index`	Zero-based position
`$count`	Total items
`$first`	First item?
`$last`	Last item?
`$odd`	Odd index?
`$even`	Even index?

`@for` Syntax

Part	Required
`item of items`	✅
`track expr`	✅ (mandatory)
`let i = $index`	Optional
`@empty { }`	Optional

`@switch` Forms

Form	Meaning
`@switch (value) { }`	Container
`@case (val) { }`	One branch
`@default { }`	Fallback

`@let` Rules

Rule	Value
Scope	From declaration to end of block
Assignable	❌ read-only
Recomputed	Every change detection cycle
Narrowing	✅ works with `@if`

Old vs New

Old	New
`*ngIf="c"`	`@if (c) { }`
`*ngIf="c; else t"`	`@if (c) { } @else { }`
`*ngFor="let x of xs; trackBy: f"`	`@for (x of xs; track x.id) { }`
`[ngSwitch]="v"`	`@switch (v) { }`
`*ngSwitchCase="v"`	`@case (v) { }`
`*ngSwitchDefault`	`@default { }`

Migration Command

Command	Purpose
`ng generate @angular/core:control-flow`	Auto-migrate old syntax

Best Practices

✅ Do This:

<!-- Use @if for conditions -->
@if (user) { <p>{{ user.name }}</p> }                       <!-- ✅ -->

<!-- Use @else if for chains -->
@if (a) { } @else if (b) { } @else { }                       <!-- ✅ -->

<!-- Always provide track -->
@for (u of users; track u.id) { <li>{{ u.name }}</li> }      <!-- ✅ -->

<!-- Use @empty for empty state -->
@for (u of users; track u.id) { } @empty { <p>None.</p> }    <!-- ✅ -->

<!-- Use @let for repeated expressions -->
@let name = user.nickname ?? user.name;                      <!-- ✅ -->

<!-- Use $index for position -->
@for (x of xs; track $index; let i = $index) { }             <!-- ✅ -->

<!-- Use @switch for many branches -->
@switch (status) { @case ('a') { } @default { } }            <!-- ✅ -->

<!-- Rely on narrowing -->
@if (user) { <p>{{ user.name }}</p> }                        <!-- ✅ no ?. -->

❌ Don’t Do This:

<!-- Don't forget track -->
@for (u of users) { }                                        <!-- ❌ compile error -->

<!-- Don't mix old and new syntax -->
<div *ngIf="x">@if (y) { }</div>                             <!-- ⚠️ pick one -->

<!-- Don't import CommonModule just for control flow -->
imports: [CommonModule]                                      <!-- ⚠️ no longer needed -->

<!-- Don't use @switch for two branches -->
@switch (x) { @case ('a') { } @default { } }                 <!-- ⚠️ use @if -->

<!-- Don't assign to @let -->
@let x = 1; @let x = 2;                                      <!-- ❌ -->

<!-- Don't use @let for component state -->
@let count = 0;  <!-- this isn't a component property -->    <!-- ⚠️ use a class field -->

<!-- Don't use $index as track for dynamic lists -->
@for (u of users; track $index) { }                          <!-- ⚠️ use u.id -->

Common Pitfalls

Pitfall	Problem	Solution
Missing `track`	Compile error	Always provide `track`
`track $index` on dynamic list	Full re-render	Track by ID
Using `*ngIf` alongside `@if`	Confusing mix	Migrate to blocks
Importing `CommonModule` unnecessarily	Dead import	Remove once nothing uses it
`@let` used outside its scope	Not visible	Declare at the right level
Assigning to `@let` variable	Read-only	Use a component property
`@switch` with `===` on objects	Never matches	Match by primitive
`@case` without `@default`	Unmatched value renders nothing	Add `@default`

Real-World Examples

1. Simple `@if`

@if (isLoggedIn) {
  <p>Welcome back!</p>
}

2. `@if` / `@else`

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

3. `@if` / `@else if` chain

@if (status === 'loading') { <p>Loading...</p> }
@else if (status === 'error') { <p>Error.</p> }
@else { <p>Ready.</p> }

4. Basic `@for`

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

5. `@for` with index

@for (item of items; track item.id; let i = $index) {
  <li>{{ i + 1 }}. {{ item.name }}</li>
}

6. `@for` with `@empty`

@for (u of users; track u.id) {
  <li>{{ u.name }}</li>
} @empty {
  <li>No users.</li>
}

7. `@for` with `$last`

@for (u of users; track u.id; let last = $last) {
  <li>{{ u.name }}{{ last ? '' : ',' }}</li>
}

8. `@switch` on a status

@switch (status) {
  @case ('loading') { <p>Loading...</p> }
  @case ('ready') { <p>Ready.</p> }
  @default { <p>Unknown.</p> }
}

9. `@let` for a computed display name

@let displayName = user.nickname ?? user.name;
<p>{{ displayName }}</p>

10. `@let` inside `@for`

@for (u of users; track u.id) {
  @let label = u.role === 'admin' ? 'Admin' : 'Member';
  <li>{{ u.name }} — {{ label }}</li>
}

11. Nested blocks

@if (users.length) {
  @for (u of users; track u.id) {
    <li>{{ u.name }}</li>
  }
} @else {
  <p>No users.</p>
}

12. `@for` with `@if` inside

@for (u of users; track u.id) {
  <li>
    {{ u.name }}
    @if (u.admin) { <span>(admin)</span> }
  </li>
}

13. `@let` with `@if` narrowing

@if (user) {
  @let name = user.name;
  <p>{{ name }}</p>
}

14. `@switch` inside `@for`

@for (item of items; track item.id) {
  @switch (item.type) {
    @case ('text') { <p>{{ item.value }}</p> }
    @case ('image') { <img [src]="item.value"> }
    @default { <p>?</p> }
  }
}

15. Run the migration

ng generate @angular/core:control-flow

Visual: Block Syntax Structure

┌──────────────────────────────────────────────┐
│  @if (condition) {                           │
│    ...                                       │
│  } @else if (cond2) {                        │
│    ...                                       │
│  } @else {                                   │
│    ...                                       │
│  }                                           │
│                                              │
│  @for (item of items; track item.id) {       │
│    ...                                       │
│  } @empty {                                  │
│    ...                                       │
│  }                                           │
│                                              │
│  @switch (value) {                           │
│    @case ('a') { ... }                       │
│    @default { ... }                          │
│  }                                           │
│                                              │
│  @let name = expression;                     │
│                                              │
└──────────────────────────────────────────────┘

Visual: `@for` Loop Variables

┌──────────────────────────────────────────────┐
│  @for (u of users; track u.id;               │
│        let i = $index,                       │
│            last = $last) {                   │
│    ...                                       │
│  }                                           │
│                                              │
│  $index  → 0, 1, 2, ...                      │
│  $count  → total items                       │
│  $first  → true on index 0                   │
│  $last   → true on last item                 │
│  $odd    → true on odd indices               │
│  $even   → true on even indices              │
│                                              │
└──────────────────────────────────────────────┘

Visual: Old vs New — Same Logic

┌──────────────────────────────────────────────┐
│  OLD                                         │
│                                              │
│  <div *ngIf="user; else noUser">             │
│    Hello, {{ user.name }}                    │
│  </div>                                      │
│  <ng-template #noUser>                       │
│    No user.                                  │
│  </ng-template>                              │
│                                              │
│  Requires CommonModule import                │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  NEW                                         │
│                                              │
│  @if (user) {                                │
│    <div>Hello, {{ user.name }}</div>         │
│  } @else {                                   │
│    <div>No user.</div>                       │
│  }                                           │
│                                              │
│  No imports needed                           │
│                                              │
└──────────────────────────────────────────────┘

Visual: `@let` Scope

┌──────────────────────────────────────────────┐
│  Template                                    │
│                                              │
│  @let topLevel = 'visible everywhere below'; │
│                                              │
│  <p>{{ topLevel }}</p>          ✅           │
│                                              │
│  @if (cond) {                                │
│    @let inner = 'only inside @if';           │
│    <p>{{ inner }}</p>            ✅           │
│    <p>{{ topLevel }}</p>         ✅           │
│  }                                           │
│                                              │
│  <p>{{ inner }}</p>              ❌           │
│                                              │
└──────────────────────────────────────────────┘

Visual: Migration Path

┌──────────────────────────────────────────────┐
│  Step 1: Run the schematic                   │
│                                              │
│  ng generate @angular/core:control-flow      │
│                                              │
└──────────────────────────────────────────────┘
                  │
                  ▼
┌──────────────────────────────────────────────┐
│  Step 2: Review the changes                  │
│                                              │
│  *ngIf → @if                                 │
│  *ngFor → @for with track                    │
│  *ngSwitch → @switch                         │
│                                              │
└──────────────────────────────────────────────┘
                  │
                  ▼
┌──────────────────────────────────────────────┐
│  Step 3: Clean up imports                    │
│                                              │
│  Remove CommonModule if nothing else needs   │
│  it (pipes, ngClass, ngStyle, etc.)          │
│                                              │
└──────────────────────────────────────────────┘

Summary

Block	Purpose	Replaces
`@if`	Conditional	`*ngIf`
`@else if`	Chained condition	nested `*ngIf` / `<ng-template>`
`@else`	Fallback	`*ngIf="x; else t"`
`@for`	Loop	`*ngFor`
`@empty`	Empty-state	`*ngIf="xs.length; else t"`
`@switch`	Multi-branch	`[ngSwitch]`
`@case`	One branch	`*ngSwitchCase`
`@default`	Fallback branch	`*ngSwitchDefault`
`@let`	Local variable	(no equivalent)

Key takeaways:

The new block syntax is part of the template language — no CommonModule imports
@if supports @else if and @else — cleaner than nested <ng-template>s
@for requires a track expression — no more optional trackBy
@for exposes $index, $count, $first, $last, $odd, $even
@empty handles the empty-list case inline — no template references
@switch matches with === and has no fallthrough — no break to forget
@let declares a local template variable — read-only, scoped, useful for aliases and narrowing
The template type-checker narrows inside @if blocks — no ?. needed
Migrate automatically with ng generate @angular/core:control-flow
New Angular code should use blocks, not directives — legacy syntax remains for compatibility

Remember: @if, @for, @switch, and @let are the modern way to shape an Angular view. They’re language features, not imports, and they read more like code. @for requires track, @if narrows types, @empty handles the list-or-nothing case, and @let gives you a way to name intermediate values without adding component state. Learn these blocks first, and treat *ngIf/*ngFor as history you’ll encounter in older codebases.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Why the new syntax exists

@if — conditional rendering

@for — repeating elements

@switch — picking one branch

@let — declaring a local template variable

Migrating from *ngIf / *ngFor / *ngSwitch

A full example

Complete Example Session

Quick Reference

Block Syntax Summary

@if Forms

@for Loop Variables

@for Syntax

@switch Forms

@let Rules