@if vs *ngIf : a New built-in Synatx in Angular 17

In the fast-growing web development industry, new technologies are being developed and introducing day by day. Angular is one of the fastest-growing technologies, and over the past few years, the Angular team has drastically changed Angular, in version Angular 17, Angular is easier and more optimized. One of the most significant enhancements in Angular 17 is the @if built-in syntax and control flow.

In the traditional way, we are using the structural directive *ngIf. In this blog, we will explore how @if is much better than the traditional *ngIf directive.

What is @if in Angular?

@if is a new built-in syntax introduced by the Angular team to conditionally hide and show DOM elements in view.

In the traditional way, if we are using *ngIf, then we need to import CommonModule in our module or component imports array, but the @if syntax case is different. We don’t need to import any module. The @if is available in the template. @if statement more readable syntax also supports else if and else statement, unlike *ngIf.

How can we use the @If statement?

We can use the @if statement as mentioned in the below code.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  template: ` @if (showTitle) {
    <h1>{{ title }}</h1>
    }`,
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {

  title = 'angular-demo';
  showTitle: boolean = true;
}

The above code will only render the <h1>{{title}}</h1> element if the showTitle property is true.

The @if else statement

The @if statement supports the @else statement and when if statement value is false then else statement will render.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  template: ` @if (showTitle) {
    <h1>{{ title }}</h1>
    }
    @else {
      <h1> Show title value is false</h1>
    }`,
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {

  title = 'angular-demo';
  showTitle: boolean = false;
}

The above code will only render the <h1>Show title value is false </h1> element if the showTitle property is false.

The @if else if statement

The @if statement also supports the @else if statement and gives us functionality to render elements more conditionally and make more readable code.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  template: ` @if (showTitle) {
    <h1>{{ title }}</h1>
    }
    @else if(showSubTitle){
      <h1>{{subTitle}}</h1>
    }
    @else {
      <h1> Show Title value is false</h1>
    }`,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  title = 'angular-demo';
  showTitle: boolean = false;
  subTitle:string="Angular Subtitle";
  showSubTitle:boolean= true;
}

The above code will only render the <h1>{{subTitle}}</h1> element if the showSubTitle property is true.

If you notice, then you will be able to see that we are not importing @if statement or any other statement from @angular/common module.

This is because the @if syntax is part of the template engine itself as we mentioned previously, and it is not a directive.

The new @if is built-in directly into the template engine, so it’s automatically available everywhere.

Now the next question is: why are we not using * syntax more?

*ngIf is a syntactical sugar coating on the [ngIf] structural directive to make it easier for developers.

*ngIf is a shorthand form of below code.

<ng-template [ngIf]="Boolean Flag" ></ng-template>

As I mentioned now, @if is part of the template engine, and it’s not directive, so we don’t need to use * anymore.

@if syntax better than *ngIf why?

Let’s summarize the reasons why @if is better than *ngIf:

• less verbose, more intuitive
• We don’t need to import any module.
• supports else if and else conditions
• no runtime overhead
• will make the future evolution of the framework easier

How can we easily migrate to the new @if syntax?

If you are using older versions of Angular, you can migrate to the new @if syntax using the Angular CLI.

The Angular CLI has an automated migration for upgrading all your code to the new @if syntax:

ng generate @angular/core:control-flow

This command will migrate all the *ngIf directives in your project to the new syntax, not only for @if but also for the @for and @switch syntax also.

Conclusion:

In this blog, we look into how @if is made developer task easier and more readable. The new built-in syntax made code more readable and also optimized the performance of our application. With the new built-in syntax, we can say goodbye to the traditional *ngIf syntax.

For more such blogs, follow me on LinkedIn and Medium.

Happy Coding.