What are @if, @for, and @switch in Angular?

@if, @for, and @switch are Angular's built-in control flow blocks used directly inside HTML templates.

They control what Angular renders in the DOM based on conditions and data.

@if      → Conditional rendering
@for     → Loop / repeat elements
@switch  → Select one block from multiple cases

Important: In modern Angular terminology, @if, @for, and @switch are built-in control flow blocks, not structural directives themselves. They provide modern alternatives to traditional structural directives such as *ngIf, *ngFor, and *ngSwitch.

1. Why Do We Need Them?

Before Angular introduced built-in control flow, templates commonly used:

*ngIf
*ngFor
*ngSwitch

For example:

<div *ngIf="isLoggedIn">
  Welcome
</div>

Modern Angular can write the same logic as:

@if (isLoggedIn) {
  <div>Welcome</div>
}

The modern syntax is generally:

• Easier to read
• Easier to write
• Better for complex conditions
• Built directly into Angular's template syntax
• Does not require importing NgIf, NgFor, etc.

2. Full Simple Sample Program

This example demonstrates all three.

app.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.html'
})
export class App {

  isLoggedIn = true;

  technologies = [
    'Angular',
    'ASP.NET Core',
    'SQL Server'
  ];

  role = 'Admin';
}

app.html

<h1>Angular Control Flow</h1>

<!-- @if -->

@if (isLoggedIn) {
  <h2>Welcome User</h2>
} @else {
  <h2>Please Login</h2>
}


<!-- @for -->

<h2>Technologies</h2>

@for (technology of technologies; track technology) {
  <p>{{ technology }}</p>
}


<!-- @switch -->

@switch (role) {

  @case ('Admin') {
    <p>Welcome Admin</p>
  }

  @case ('User') {
    <p>Welcome User</p>
  }

  @default {
    <p>Unknown Role</p>
  }

}

3. @if

@if is used to conditionally render content.

Syntax

@if (condition) {
  <!-- HTML -->
}

Example:

@if (isLoggedIn) {
  <h2>Welcome User</h2>
}

If:

isLoggedIn = true;

Angular renders:

Welcome User

If it is false, that <h2> is not rendered.

@if with @else

@if (isLoggedIn) {
  <h2>Welcome User</h2>
} @else {
  <h2>Please Login</h2>
}

Flow:

isLoggedIn?
     │
 ┌───┴────┐
True     False
 │          │
Welcome   Please Login

@else if

You can also have multiple conditions:

@if (marks >= 80) {
  <p>Grade A</p>
} @else if (marks >= 60) {
  <p>Grade B</p>
} @else {
  <p>Grade C</p>
}

4. @for

@for is used to repeat HTML for each item in a collection.

Syntax

@for (item of items; track item) {

}

Example:

technologies = [
  'Angular',
  'ASP.NET Core',
  'SQL Server'
];

Template:

@for (technology of technologies; track technology) {
  <p>{{ technology }}</p>
}

Output:

Angular
ASP.NET Core
SQL Server

Angular creates one <p> for every item.

Why track?

Notice this:

track technology

track helps Angular identify each item between rendering updates.

For objects, using a unique ID is usually better:

users = [
  { id: 1, name: 'Syed' },
  { id: 2, name: 'John' }
];

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

If the collection changes, Angular can identify which DOM elements correspond to which users.

This can reduce unnecessary DOM work.

@empty

@for also supports @empty.

@for (user of users; track user.id) {

  <p>{{ user.name }}</p>

} @empty {

  <p>No users found.</p>

}

If users is empty:

No users found.

This is a useful improvement over many traditional *ngFor patterns.

5. @switch

@switch is useful when one value can have several possible cases.

Syntax

@switch (value) {

  @case ('value1') {
    ...
  }

  @case ('value2') {
    ...
  }

  @default {
    ...
  }

}

Example:

role = 'Admin';

Template:

@switch (role) {

  @case ('Admin') {
    <p>Welcome Admin</p>
  }

  @case ('User') {
    <p>Welcome User</p>
  }

  @default {
    <p>Unknown Role</p>
  }

}

Because:

role = 'Admin';

the output is:

Welcome Admin

6. Traditional vs Modern Angular

For example:

Traditional

<div *ngIf="isLoggedIn">
  Welcome
</div>

Modern

@if (isLoggedIn) {
  <div>Welcome</div>
}

7. Do We Need to Import Them?

One major advantage is that built-in control flow does not require directive imports.

For example, with traditional standalone Angular:

import { NgIf, NgFor } from '@angular/common';

@Component({
  imports: [NgIf, NgFor]
})

With modern control flow:

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

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

No NgIf or NgFor import is required for those blocks.

8. Advantages

• Cleaner and more readable template syntax.
• Built directly into Angular template syntax.
• No need to import NgIf, NgFor, etc.
• @if provides straightforward @else if and @else.
• @for provides built-in @empty.
• track makes item identity explicit.
• Complex conditional templates are generally easier to understand.

9. Disadvantages

There are no major inherent disadvantages, but:

• Developers maintaining older Angular applications still need to understand *ngIf, *ngFor, and *ngSwitch.
• Teams migrating older applications may temporarily have both syntaxes.
• Developers familiar with older Angular versions need to learn the newer syntax.

10. Key Points

• @if, @for, and @switch are built-in control flow blocks.
• They were introduced in Angular 17.
• @if handles conditional rendering.
• @for handles iteration.
• @switch handles multiple cases.
• @else works with @if.
• @empty works with @for.
• @case and @default work with @switch.
• @for uses a track expression to identify items efficiently.
• They don't require importing NgIf, NgFor, or NgSwitch.
• For modern Angular applications, these are the preferred template control-flow syntax.

Easy way to remember

@if
   ↓
Should I display it?


@for
   ↓
How many times should I display it?


@switch
   ↓
Which one should I display?

11. Interview Questions and Answers

Q1. What are @if, @for, and @switch?

They are Angular's built-in control flow blocks used for conditional rendering, iteration, and selecting between multiple cases.

Q2. Is @if a structural directive?

Strictly speaking, no. @if is a built-in control flow block.

Traditional:

<div *ngIf="isVisible">Hello</div>

Modern:

@if (isVisible) {
  <div>Hello</div>
}

Both control rendering, but they use different Angular mechanisms and syntax.

Q3. What is the difference between @if and *ngIf?

Both conditionally render content, but @if is Angular's newer built-in control flow syntax, while *ngIf is the traditional structural directive syntax.

Q4. What is the difference between @for and *ngFor?

Both iterate over collections. @for uses modern block syntax and provides features such as explicit track and @empty.

Q5. What is track in @for?

track tells Angular how to uniquely identify collection items.

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

For database records, a unique ID is commonly the best tracking key.

Q6. What is @empty?

@empty defines content to display when an @for collection contains no items.

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

Q7. Do @if and @for require CommonModule?

No. The built-in control flow syntax doesn't require importing CommonModule, NgIf, or NgFor just to use these blocks.

Q8. What is the best short interview answer?

@if, @for, and @switch are Angular's modern built-in control flow blocks. @if performs conditional rendering, @for iterates over collections, and @switch selects content based on multiple cases.