Angular ngFor Built-In Directive
Angular ngFor built-in directive is used to iterate an array or an object, which helps to display each item value in the array. Here now we going to create an HTML template with ul li and using that we loop the value.
Basic Angular ngFor Directive
Now you going to see basic ngFor directive. With the quickstart, we going to repeat the HTML li tag with each value in the loop. Below you have the example, open the app.component.ts and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], template: ` <ul> <li *ngFor="let user of users"> {{ user.name }} </li> </ul> ` }) export class AppComponent { users: any[] = [ { "name": "Mohan Raj" }, { "name": "Harish Billa" }, { "name": "Raja Pichandi" }, { "name": "Siva Raj" }, { "name": "Gopi Nath" }, { "name": "Ranjith Kumar" } ]; } |
The above ngFor directive will display the HTML element with display a single user of the users collection. Here we looping each user array and execute the users name list.
Display in HTML
If you like to display in app.component.html or somewhere which would you like? It is simple, instead of using the template you can use in .html extension, like the below code.
|
1 2 3 4 5 6 7 8 |
<!--Users List.--> <ul> <li *ngFor="let user of users"> {{ user.name }} </li> </ul> <router-outlet></router-outlet> |
Output:
Index Angular ngFor Directive
If you like to get the index of the particular user’s element? by adding another variable in our ngFor we going to get the index value, below you have an example.
|
1 2 3 4 5 6 |
<!--Users List.--> <ul> <li *ngFor="let user of users; let sno = index"> {{ sno + 1 }}, {{ user.name }} </li> </ul> |
The index always starts from 0 but here you can see the index will start from 1 because here we declared the index variable as 1, so it starts from 1.
Output:
Grouping Angular ngFor Directive
If you like to get the group of data and display it with the ngFor directive? here below you can see by a group of the location we can get both data and display the values by using two ngFor directives. Use the below code in app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { groupUsers: any[] = [ { 'location': 'US', 'users': [ { "name": "Mohan Raj" }, { "name": "Harish Billa" }, { "name": "Raja Pichandi" } ] }, { 'location': 'UK', 'users': [ { "name": "Siva Raj" }, { "name": "Gopi Nath" }, { "name": "Ranjith Kumar" } ] } ]; } |
Now open the app.component.html and add the below code, here we used two ngFor one for locations another users list and index value for each user by locations.
|
1 2 3 4 5 6 7 8 9 |
<!--Users List.--> <ul *ngFor="let group of groupUsers"> <li><h3>{{ group.location }}</h3></li> <li *ngFor="let user of group.users; let sno = index"> {{ sno + 1 }}, {{ user.name }} </li> </ul> <router-outlet></router-outlet> |
Output:
Conclusion:
I believe this article helps you out from what is ngFor and how it works. If you like this article share it with your friends or if you have any questions use the below comment box.
