Hey guys in this post we will discuss angular structural directive ngFor. This directive will be used to loop through the items or list inside the view template. let’s look at an example.
Assume that we have an array of numbers from 1 to 10 and we need to display those numbers inside the view template.
File: app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
public numbers: number[] = [];
constructor() {
}
ngOnInit(): void {
for (let index = 1; index <= 10; index++) {
this.numbers.push(index);
}
}
}
In order to loop through the numbers inside the view template, we will use angular structural directive ngFor. Let’s look at the syntax first.
<div *ngFor="let item of items">
</div>here, we will add * to the ngFor, indicating that this is a structural directive. Next, items is the list or an array that you want to iterate. Then item, is the local reference variable will be creating with let keyword using which we will access the item/number/object
Now let’s look at the example to loop through the inside view template
File: app.component.html
<div>
<p *ngFor="let i of numbers">{{i}}</p>
</div>This will loop through the numbers array. It also creates <p> tag which is the size of the array. Because we will be looping on the <p> tag.
We can also loop through the array of objects. let’s look at an example
File: app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
public employees: any[] = [{
name: 'Bushan',
salary: 10000
}, {
name: 'Bharath',
salary: 20000
},{
name: 'Chaitra',
salary: 30000
}, {
name: 'Chethan',
salary: 40000
}];
}
We have list of employees, each employee object having name and salary. let’s loop iterate this array of objects inside the view template.
File: app.component.html
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr *ngFor="let e of employees">
<td>{{e.name}}</td>
<td>{{e.salary}}</td>
</tr>
</table>you can see, e is the local reference variable and this will hold the single employee object. we will access the properties using dot(.)
Optionally, the ngFor provides the index of each item. let’s look at an example
<table border="1">
<tr>
<th>Sl. No.</th>
<th>Name</th>
<th>Salary</th>
</tr>
<tr *ngFor="let e of employees; let i = index;">
<td>{{i + 1}}</td>
<td>{{e.name}}</td>
<td>{{e.salary}}</td>
</tr>
</table>you can see, inside the ngFor, after the array, we will be accessing the index of the item and will be assigning it to the local variable i.
This way we can access the index of each item.
