Conditional Rendering in Angular: New @if, @else if, @else and Old *ngIf Syntaxes

Conditional rendering is a fundamental aspect of Angular development. It allows developers to display elements or components based on certain conditions, making applications more dynamic and responsive to user interactions. With the release of Angular 17-18, a new @if syntax was introduced, complementing the existing *ngIf directive.

In this article, we’ll dive into both the new and old syntaxes for conditional rendering in Angular. We’ll explore how they work, compare their usage, and discuss when to use each syntax for different scenarios.

What Is Conditional Rendering?

Conditional rendering in Angular means displaying or hiding parts of the template based on a condition. This condition is typically a Boolean expression, such as checking whether a user is logged in, verifying if data has loaded, or determining the state of a form.

Old Syntax: *ngIf

The *ngIf directive has been the traditional way to handle conditional rendering in Angular since its early versions. It’s a structural directive, which means it can add or remove elements from the DOM based on a specified condition.

How *ngIf Works

The *ngIf directive evaluates an expression, and if the expression is true, it adds the corresponding element(s) to the DOM. If the expression is false, the element(s) are removed from the DOM.

Here’s an example:

htmlCopy code<div *ngIf="isLoggedIn">
  <h1>Welcome, user!</h1>
</div>

In this case:

• If the isLoggedIn variable is true, the <h1> element is rendered.
• If isLoggedIn is false, the <h1> element is not rendered.

*ngIf with else Block

The *ngIf directive can also be used with an else block, allowing you to define alternative content when the condition is false.

Example:

htmlCopy code<div *ngIf="isLoggedIn; else loggedOut">
  <h1>Welcome, user!</h1>
</div>
<ng-template #loggedOut>
  <h1>Please log in.</h1>
</ng-template>

• If isLoggedIn is true, the first block with the <h1>Welcome, user!</h1> is rendered.
• If isLoggedIn is false, the content inside the <ng-template> with the #loggedOut reference is rendered instead.

More examples with @if, @else if, @else:

@if (course.id === 1) {
  <h2>Course with ID 1 detected!</h2>
}

@else if (course.iconUrl) {
  <img width="300" alt="Angular Logo"
       [src]="course.iconUrl">
}
@else {
  <h2>No image available!</h2>
}

Pros and Cons of *ngIf

Pros:

• Familiar to Angular developers and widely used.
• Versatile, with options for else blocks and nested conditions.
• Offers good performance as it removes elements from the DOM when the condition is false.

Cons:

• The syntax can become verbose, especially when dealing with complex templates or multiple conditions.
• Requires ng-template tags to define else or then conditions, which can make templates harder to read and maintain.

New Syntax: @if

Angular 17-18 introduces a new way to handle conditional rendering with the @if syntax. It aims to simplify the template structure, making the code more readable and reducing the need for extra ng-template elements.

How @if Works

The @if syntax offers a cleaner, more intuitive way to handle conditions in templates. It supports both then and else blocks, but with a more natural flow.

Here’s the same example using the new @if syntax:

htmlCopy code@if (isLoggedIn) {
  <h1>Welcome, user!</h1>
} @else {
  <h1>Please log in.</h1>
}

In this case:

• If isLoggedIn is true, the content inside the @if block is rendered.
• If isLoggedIn is false, the content inside the @else block is rendered.

Advantages of Using @if

1. Enhanced Readability The @if syntax reduces the need for extra ng-template tags, making the template code more readable. It mimics the way conditions are written in JavaScript, which is familiar to most developers.

2. Clear Separation of Logic The @if and @else blocks clearly define the conditions, making it easier to understand the template’s logic at a glance.

3. Built for Complex Scenarios The @if syntax is designed to handle complex conditional rendering scenarios more effectively, allowing developers to focus more on logic and less on directive management.

Combining @if and *ngIf in a Single Template

One of the strengths of Angular 17-18 is that the new @if syntax can be used alongside the existing *ngIf syntax in the same project. This allows developers to gradually adopt the new syntax without needing to refactor entire components immediately.

Here’s an example of using both syntaxes together:

htmlCopy code<!-- Using new @if syntax -->
@if (isAdmin) {
  <h1>Admin Dashboard</h1>
} @else {
  <h1>User Dashboard</h1>
}
<!-- Using old *ngIf syntax -->
<div *ngIf="isLoggedIn; else notLoggedIn">
  <h1>Welcome, user!</h1>
</div>
<ng-template #notLoggedIn>
  <h1>Please log in.</h1>
</ng-template>

In this template:

• The @if syntax is used to determine whether to display the admin or user dashboard.
• The *ngIf syntax is used to conditionally display the welcome message or login prompt.

When to Use Each Syntax

1. Use *ngIf When:

• You’re working on a project that’s still largely based on Angular versions prior to 17.
• You need to maintain backward compatibility with older Angular codebases.
• You prefer using ng-template tags for more complex, nested conditions.

2. Use @if When:

• You want to write cleaner, more readable template code.
• You’re building a new Angular 17-18 project and want to leverage the latest features.
• You’re dealing with complex conditions where a clearer structure can enhance maintainability.

How Conditional Rendering Affects Performance

Both *ngIf and @if are optimized for performance in Angular. However, the way they manage the DOM differs:

• *ngIf removes elements from the DOM when the condition is false, which can help improve performance by reducing the number of elements in the DOM tree.
• @if works similarly but with a more streamlined syntax, ensuring that elements are only created and inserted when necessary.

In general, both syntaxes offer efficient DOM manipulation, but the performance benefits of using one over the other are minimal. The choice between the two should primarily be based on readability, maintainability, and project requirements.

Transitioning to the New Syntax

If you are planning to transition to the new @if syntax in an existing Angular project, consider the following steps:

1. Start with New Components: Begin by using the @if syntax in newly created components or modules. This allows you to explore the new syntax without affecting existing functionality.
2. Gradually Refactor Old Code: As you become more comfortable with the new syntax, you can gradually refactor existing templates from *ngIf to @if. This can be done incrementally to avoid introducing breaking changes.
3. Use Both Syntaxes When Needed: Don’t hesitate to mix both syntaxes in the same project, as Angular 17-18 fully supports this. It allows for a smoother transition while taking advantage of the new syntax’s improved readability.

Conclusion

Angular’s introduction of the @if syntax in version 17-18 provides developers with a more modern, concise, and readable way to handle conditional rendering. While the old *ngIf syntax remains valid and effective, the new @if syntax offers a clearer approach, particularly for more complex templates.

Both syntaxes are useful and can coexist within the same Angular project, providing flexibility to developers based on their project needs, preferences, and the complexity of conditional rendering scenarios. Whether you’re working with the old or new syntax, Angular continues to offer robust tools for managing dynamic templates effectively.

4o