Control Flow In Angular - NashTech Blog

Introduction

Angular, being a front-end framework, often deals with asynchronous operations such as handling user input, making HTTP requests, and managing state changes. Angular provides built-in mechanisms for managing control flow, ensuring that operations are executed in a specific order and handling the complexities of asynchronous programming. Angular utilizes various mechanisms to control the flow of data, handle asynchronous operations, and manage the overall lifecycle of components.

Angular 17 comes with a lot of new and advanced features. One of them is Control Flow. As the name suggests, this feature introduces built-in control flow for templates, it brings a new declarative syntax of writing control flow straight into the template. Hence it eliminates the need to use *ngIf, *ngFor and ngSwitch which was a directive-based control flow. These directive-based control flows is not easy to remember and implement, as compared with the new feature built-in control flow.

Angular Project Setup

Before we start with understanding the cool new feature, let’s ensure you have an Angular project steup in your machine. To initiate a new Angular project with the Angular CLI use the following commands:

npm install -g @angular/cli@latest
ng new control-flows-ng17

The above command sets up a new Angular project with the latest version in our local machine, complete with all the necessary files and dependencies. After the above setup, open the app.component.html and clear out all the existing code that Angular gives by default. Now, let’s add a simple HTML code to it.

<h1>The new control flows in Angular</h1>

Conditional Statements in Angular

The if conditions

Up until now, Angular has allowed us to create simple if statements with the usage of the NgIf directive

<h1>The new control flows in Angular</h1>
<button (click)="toggleFruit()">Toggle Apple</button>
<div *ngIf="isApple; else other">
  This is an apple
</div>
<ng-template #other>
  This is not an apple!
</ng-template>

Now, with the help of built-in if statement, the above condition will look like:

<h1>The new control flows in Angular</h1>
<button (click)="toggleFruit()">Toggle Apple</button>
@if (isApple) {
  <p>This is an apple</p>
} @else {
  <p>This is not an apple</p>
}

The switch conditions

The Switch-Case statement permits you to evaluate an expression and run different blocks of code based on the matched case. Hence it makes it a useful tool for handling multiple branching conditions.

Angular is able to provide the content for @else directly is a major simplification compared to the else clause of the legacy *ngIf alternative. The new control flow also makes it possible to have @else if, which historically has been impossible. The improved ergonomics and the code structure are even more visible with *ngSwitch:

Assume you have a variable fruit in your component.ts file, which can have three values ‘Mango‘, ‘Watermelon‘, and ‘Apple‘. The target is to display the fruit name according to the value of the variable on the webpage.

This is how we would have done it using the *ngSwitch:

<div [ngSwitch]="fruit">
  <div *ngSwitchCase="'Mango'">This is a Mango</div>
  <div *ngSwitchCase="'Watermelon'">This is a Watermelon</div>
  <div *ngSwitchCase="'Apple'">This is a Apple</div>
  <div *ngSwitchDefault>Unkonown fruit</div>
</div>

With the use of new control flows, the above condition will become:

@switch(streamingService) { 
  @case ('Mango') {
    <div>'This is a Mango'</div>
  } @case ('Apple') {
    <div>'This is a Apple'</div>
  } @case ('Watermelon') {
    <div>'This is a Watermelon'</div>
  } @default {
    <div>'Unkonown fruit'</div>
  }
}

The For Loop

This has to be one of the important updates which makes using for loops much easier and simpler for developers compared to the traditional *ngFor. Also as per the Angular, the use of the new For Loop has improvements in rendering times as well.

Let’s create a simple fruits array in the component.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'control-flows-ng17';
  fruits: string[] = ['Mango', 'Apple', 'WaterMelon'];
}

If there was no Angular 17, then the to display the list of fruits in a list, this is how we would have done.

<h1>Let's Lern the new control flows</h1>
<div *ngFor="let fruit of fruits">
  <ul>
    <li>{{fruit}}</li>
  </ul>
</div>

Now, with using the new control flow for loop with Angular 17. The above code looks like:

<h1>Let's Lern the new control flows</h1>
@for (fruit of fruits; track $index) {
  <ul>
    <li>{{fruit}}</li>
  </ul>
} @empty {
  Empty list of fruits
}

Advantages of built-in control flow in Angular

It is more ergonomic syntax that is closer to JavaScript. Hence it is more intuitive requiring fewer documentation lookups.
It have a good type checking and more optimal type narrowing.
It’s a concept that primarily exists at build-time, So it decreases the runtime footprint (making it “disappearing”) which could drop your bundle size by up to 30 kilobytes and further improve your Core Web Vital scores.
It becomes available in your templates without additional imports.
It has significant performance improvements.

Conclusion

In this blog, we have explained the Control Flow that comes as new feature in Angular 17. We have created a simple project to explain the use of if-else, switch and for concept.

Reference Link:- https://en.wikipedia.org/wiki/Angular_(web_framework)