Angular 17-18: Using New Syntax (@for, @if, @switch) Alongside the Old Syntax (*ngFor, *ngIf, *ngSwitch)

With the release of Angular 17 and 18, the framework introduces new syntax options for some of its most common template structures. This includes @for, @if, and @switch, which are meant to simplify the way developers write loops, conditionals, and switch-case scenarios. However, these new syntaxes do not replace the older *ngFor, *ngIf, and *ngSwitch directives—instead, they coexist, offering developers the flexibility to choose between the new and the old syntax in the same project.

In this article, we’ll explore how these new syntaxes work, why they were introduced, and how you can use both the new and old syntaxes in the same Angular project. This flexibility ensures a smooth transition and backward compatibility, while also introducing powerful new capabilities for your Angular templates.

New Syntax Overview

1. @for (Replaces *ngFor)

The new @for syntax offers a more concise and flexible way to iterate over collections in templates. It includes built-in functionality for tracking items and handling empty states, which previously required additional code.

Example:

@for (course of courses; track course.id; let index = $index) {
  <course-card [course]="course" [index]="index"></course-card>
}
@empty {
  <h1>No courses found!</h1>
}

2. @if (Replaces *ngIf)

The @if syntax simplifies conditional rendering by clearly separating the then and else blocks within the template. It provides better readability and is more intuitive when dealing with complex conditions.

Example:

@if (isLoggedIn) {
  <h1>Welcome back!</h1>
} @else {
  <h1>Please log in.</h1>
}

3. @switch (Replaces *ngSwitch)

The @switch syntax allows for clearer switch-case conditions in templates. It mimics the behavior of the standard switch statement in JavaScript, with better integration in Angular’s templates.

Example:

@switch (userRole) {
  @case 'admin' {
    <h1>Admin Panel</h1>
  }
  @case 'user' {
    <h1>User Dashboard</h1>
  }
  @default {
    <h1>Guest View</h1>
  }
}

Why Angular Introduced the New Syntax

The new @for, @if, and @switch syntaxes were introduced to make templates more readable and expressive. They allow developers to handle more complex template scenarios with fewer directives and clearer separation of logic, enhancing maintainability.

Key reasons for introducing these new syntaxes:

1. Improved Readability: The new syntax allows for a more natural, less verbose way of writing templates. For example, instead of embedding directives like *ngIf and *ngSwitch, the logic flows more naturally in the template with @if and @switch.
2. Simplified Logic: Handling conditions, loops, and cases with the new syntax leads to cleaner code and makes it easier to reason about template logic, especially in larger projects.
3. Backward Compatibility: Angular recognizes that existing projects may not be able to adopt the new syntax right away. By keeping the old syntax (*ngFor, *ngIf, *ngSwitch) alongside the new, developers have the flexibility to transition at their own pace.

How to Use Both Old and New Syntax Together

One of the key benefits of Angular 17-18 is that you can mix both the new and old syntax in the same project without any issues. This is useful for projects that have existing code using *ngFor, *ngIf, and *ngSwitch, but also want to take advantage of the new syntax where appropriate.

Here’s an example of how you can use both the old and new syntax together in a single component:

<!-- New Syntax for Looping -->
@for (course of courses; track course.id; let index = $index) {
  <course-card [course]="course" [index]="index"></course-card>
}
@empty {
  <h1>No courses available!</h1>
}

<!-- Old Syntax for Conditional Rendering -->
<div *ngIf="isLoggedIn; else loggedOut">
  <h1>Welcome, user!</h1>
</div>
<ng-template #loggedOut>
  <h1>Please log in.</h1>
</ng-template>

<!-- New Syntax for Switch Case -->
@switch (userRole) {
  @case 'admin' {
    <h1>Admin Panel</h1>
  }
  @case 'user' {
    <h1>User Dashboard</h1>
  }
  @default {
    <h1>Guest View</h1>
  }
}

<!-- Old Syntax for Looping -->
<ul>
  <li *ngFor="let item of items; let i = index">{{ i + 1 }}. {{ item }}</li>
</ul>

In this example:

• The new @for loop syntax is used for displaying a list of courses, with built-in tracking and empty state handling.
• The old *ngIf syntax is used for conditional rendering based on whether the user is logged in.
• The new @switch syntax is used for rendering different templates based on the user’s role.
• The old *ngFor syntax is still being used to loop over a simple list of items.

When to Use the New Syntax

Although both syntaxes can coexist, there are scenarios where it makes sense to prioritize the new syntax:

1. Complex Template Logic: When handling multiple conditions, loops, and state tracking in a single template, the new syntax can make your code more readable and easier to maintain. It’s especially useful in larger applications with complex UI interactions.
2. Empty States and Tracking in Loops: The new @for syntax shines when you need to track items by a specific property (such as an ID) and handle empty states without extra directives like *ngIf.
3. Clean Separation of Conditional Logic: The @if and @switch syntaxes allow you to handle conditional logic directly within the template, without needing extra ng-template tags for else or case conditions.

Backward Compatibility and Gradual Adoption

One of the standout features of Angular 17-18 is the ability to mix both syntaxes. This makes it easy for developers to gradually adopt the new syntax without breaking existing functionality or needing to rewrite entire components.

For example, if you have an older codebase with *ngFor and *ngIf, you can start adopting the new syntax in new components or gradually refactor existing templates over time. Angular will continue to support the old syntax, so there’s no rush to switch over completely.

Performance Considerations

Both the old and new syntaxes are optimized for performance. The new @for syntax, in particular, introduces built-in tracking and more efficient handling of list changes, which can improve performance for large datasets. However, the differences in performance between the old and new syntax will likely be minimal for smaller, simpler projects.

Conclusion

Angular 17-18 provides developers with a flexible way to write cleaner, more readable templates by introducing the @for, @if, and @switch syntaxes. These new features can be used alongside the older *ngFor, *ngIf, and *ngSwitch directives, allowing for a gradual transition and backward compatibility.

Whether you’re building new components or refactoring an existing Angular project, you now have the option to use whichever syntax best suits your needs, ensuring both productivity and maintainability.