@if in Angular 17

Angular continues to evolve with each release. Angular 17 introduces various new features aimed at enhancing the developer experience and simplifying the framework's overall functionality. One such feature is the addition of the @if directive, which streamlines how developers handle conditional rendering in Angular templates.

In this article, we will see a comprehensive guide on the new @if directive in Angular 17, exploring its syntax, usage, and the improvements it offers over previous methods.

Overview of Conditional Rendering in Angular

Before Angular 17, conditional rendering in templates was typically handled using the *ngIf directive. *ngIf allows developers to display or hide elements in the DOM based on a boolean condition. The syntax was relatively straightforward, but with the introduction of @if, Angular has made it even more concise and powerful.

Previous Approach: *ngIf

In Angular versions before 17, conditional rendering was done as follows:

<div *ngIf="isLoggedIn">
    Welcome back, user!
</div>

The *ngIf directive removes or inserts elements into the DOM based on the evaluated condition. It also offers additional features such as else blocks for fallback content:

<div *ngIf="isLoggedIn; else notLoggedIn">
    Welcome back, user!
</div>
<ng-template #notLoggedIn>
    Please log in.
</ng-template>

While functional, this approach required multiple templates, and for more complex conditions, it could get verbose and harder to manage. Angular 17's @if aims to solve this by providing a more flexible and concise alternative.

Introduction to @if in Angular 17

With Angular 17, the @if directive was introduced to simplify conditional rendering by offering a more intuitive and expressive way to handle conditionals within templates. It comes with a concise syntax and eliminates the need for additional templates in many cases.

Basic Syntax: The @if directive allows you to directly embed conditions within the template using a more natural syntax:

<div @if="isLoggedIn">
    Welcome back, user!
</div>

The primary difference between @if and *ngIf is the simplicity of the syntax. The @if is more in line with traditional conditional statements in JavaScript, making it easier to reason about for developers familiar with the language.

Why don't we need to import @if?

• The component templates no longer need to import the @if directive from @angular/common.
• This is so because the @if syntax is not a directive; rather, it is a component of the template engine itself.
• Since the new @if is integrated right into the template engine, it is accessible everywhere by default.

Steps To Use @if in Angular 17

Step 1: Set Up a New Angular Project

If you don’t have an Angular project set up yet, you can create one using the Angular CLI.

npm install -g @angular/cli
ng new if-directive
cd if-directive

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "lodash": "^4.17.21",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Example 1: In this example we are using @if to handle the basic condition.

<!-- app.component.html -->

@if (showHello) {
    <h2
      style="background-color: rgb(142, 85, 153);
        width: 60px; border-radius: 5px"
    >
      Hello
    </h2>
}

//app.component.ts

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

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'if-directive';
    showHello: boolean = true;
}

Output:

If the showHello property is true, only then will the <h2>Hello</h2> element be rendered by the code above.

Example 2: The @if else syntax

else conditions are also supported by the @if syntax.

<!-- app.component.html -->

@if (showHello) {
    <h2  style="background-color: rgb(142, 85, 153); 
        width: 60px; border-radius: 5px">Hello</h2>
    } 
    @else {
    <h2  style="background-color: rgb(72, 99, 139); 
        width: 60px; border-radius: 5px">Goodbye</h2>
}   

//app.component.ts

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

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'if-directive';
    showHello: boolean = true;

}

Output: The <h2>Hello</h2> element if the showHello property is true

the <h2>Goodbye</h2> element if the showHello property is false

Example 3: The @if else if else condition.

<!-- app.component.html -->

@if (showHello) {
    <h2 style="background-color: rgb(141, 77, 138);
        width: 100px; border-radius: 5px">Hello</h2>
  } 
  @else if (showGoodbye) {
    <h2 style="background-color: rgb(72, 99, 139); 
        width: 100px; border-radius: 5px">Goodbye</h2>
  } 
  @else {
    <h2 style="background-color: rgb(49, 245, 5); 
        width: 100px; border-radius: 5px">See you later</h2>
  }

//app.component.ts

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

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'if-directive';
    showHello: boolean = true;
    showGoodbye: boolean = false;
}

Output: render the <h2>Hello</h2> element in the event that the showHello property is true;

If the showGoodbye property is true and the showHello property is false;

//app.component.ts

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

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'if-directive';
    showHello: boolean = false;
    showGoodbye: boolean = true;
}

Output:

If both the showHello and showGoodbye properties are false, render the <h2>Goodbye</h2> element.

//app.component.ts

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

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'if-directive';
    showHello: boolean = false;
    showGoodbye: boolean = false;
}

Output: