Angular 17 @for and @empty For Loop Example

By Hardik Savani May 2, 2024 Category : Angular

Hi,

In this example, you will learn angular 17 @for and @empty example. we will help you to give an example of angular 17 for loop example. We will look at an example of angular 17 @for index. I would like to share with you angular 17 @for track example. Alright, let’s dive into the steps.

Angular provides for loop using ngFor but, Angular 17 changed the for loop flow flow with new syntax. You can use @for and @empty for the for loop in angular 17. You can see one be one example with output and a new for loop with index and track.

Let's see the simple example code:

Example:

You can update the following code with the app.component.ts file:

src/app/app.component.ts

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

import { CommonModule } from '@angular/common';

@Component({

selector: 'app-root',

standalone: true,

imports: [CommonModule],

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

users = [

{ id: 1, name: 'Hardik Savani' },

{ id: 2, name: 'Keval Kashiyani' },

{ id: 3, name: 'Harshad Pathak' },

];

}

Here, update the app.component.html file:

src/app/app.component.html

<div class="container">

<!-- New @for loop -->

<ul>

@for (user of users; track user.id) {

<li>{{ user.id }}. {{ user.name }}</li>

} @empty {

<span>Empty list of users</span>

}

</ul>

<!-- Old ngFor loop -->

<li *ngFor="let user of users;">

{{user.id}}. {{user.name}}

</li>

</div>

Output:

You will see the following output:

1. Hardik Savani

2. Keval Kashiyani

3. Harshad Pathak

I hope it can help you...

Shares