How to Use ngFor in Angular 9/8 by Example
Tags: angular
Published: 2019-12-22 20:59:10

---
title: How to Use ngFor in Angular 9/8 by Example
published: true
description: "In this quick tutorial, we'll see by example how to use ngFor to display lists of data in Angular"
tags: angular
---

In this tutorial, you'll learn about the `ngFor` directive by example in Angular 9. 

You'll learn about these concepts:

- What's `ngFor` and what's used for,
- How to get the index in `ngFor`

> **Note**: In this Angular 9 [tutorial](https://www.techiediaries.com/html-tutorial), we'll be learning about the `ngFor` directive by building a simple example that fetches data and displays it in the HTML template. 


Let's get started started!

See this Stackblitz example for how to use `ngFor` and `ngIf` in your Angular 9 HTML template:

<iframe src="https://stackblitz.com/edit/angular-html-template-syntax?embed=1&file=src/app/home/home.component.html" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>


## What `ngFor` is Used for?   

`ngFor` is a built-in directive that you can use in your Angular 9 templates to iterate through lists and arrays of data in order to display it. This is similar to the loop constructs in programming languages.


> Also see [How to repeat an HTML element or component multiple times in Angular 9/8?](https://shabang.dev/question/how-to-repeat-an-html-element-or-component-multiple-times-in-angular-9-8/)

Let's suppose we have an Angular 9/8 component that has the following array of data:

```ts
policies: [] = [
	{id: 0, name: "policy001"},
	{id: 2, name: "policy002"},
	{id: 3, name: "policy003"},
	{id: 4, name: "policy004"},
	{id: 5, name: "policy005"},	
];
```

> Check out how to [install Angular 9 and generate a project](https://www.ahmedbouchefra.com/angular/install-angular-9-cli-and-create-project-with-routing/).

In your template, you can display your policies in HTML table using an `ngFor` directive. For example, this is an example template:

```html
<table>
<thead>
<th># Policy ID</th>
<th>Policy name</th>
</thead>
<tbody>
<tr *ngFor="let policy of policies">
<td>{{policy.id}}</td>
<td>{{policy.name}}</td>
</tr>
</tbody>
</table>
```

This is the example of a complete Angular 9 component with a template:

```ts
@Component({
	selector:'policy-list',
	template: `
<table>
<thead>
<th># Policy ID</th>
<th>Policy name</th>
</thead>
<tbody>
<tr *ngFor="let policy of policies">
<td>{{policy.id}}</td>
<td>{{policy.name}}</td>
</tr>
</tbody>
</table>
`	
})
export class PolicyListComponent {
    policies: [] = [
	  {id: 0, name: "policy001"},
	  {id: 2, name: "policy002"},
	  {id: 3, name: "policy003"},
	  {id: 4, name: "policy004"},
	  {id: 5, name: "policy005"},	
    ];
}
```


You simply pass `ngFor` expression in the `let ELEMENT of YOUR_ARRAY` format. `ELEMENT` is a variable that refers to an item of the array that's accessed inside the loop. `YOUR_ARRAY` refers to an array declared in the corresponding component.
 
The `let` and `of` keywords are mandatory in the `ngFor` expression. 

In a real-world web application, you'll need to create and implement an Angular service to  [fetch data from a REST API server using Angular HttpClient](https://www.techiediaries.com/angular-http-client/).     

## How to Find the Index of the Current Element in the `ngFor` loop

In many scenarios, you would need to know about the index of the current element inside the `ngFor` loop.

You can simply use the `index` keyword. For example:

```html
<tr *ngFor="let policy of policies; let i = index">
	<td>Index: {{i}}</td>
	<td>{{policy.name}}</td>
</tr>
```

As you can see, we simply add another expression— `let i = index` which assigns the index to the `i` variable.

## Getting the First and Last Elements inside a `ngFor` loop 

You also access the first and last elements of your `ngFor` loop using two `first` and `last` variables. For example:

```html
<tr *ngFor="let policy of policies; let first = first; let last = last">
	<td>{{policy.name}}</td>
</tr> 
```

For example, you can use these variables to apply different CSS styles to the first and last elements.

Check out our other [Angular how-tos](https://www.techiediaries.com/angular/).

You can reach out to or follow the author via his  [personal website](https://www.ahmedbouchefra.com/contact),  [Twitter](https://twitter.com/ahmedbouchefra),  [LinkedIn](https://www.linkedin.com/in/mr-ahmed/)  and  [Github](https://github.com/techiediaries).