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, 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:
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?
Let's suppose we have an Angular 9/8 component that has the following array of data:
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.
In your template, you can display your policies in HTML table using an ngFor
directive. For example, this is an example 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>
This is the example of a complete Angular 9 component with a template:
@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.
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:
<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:
<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.
You can reach out to or follow the author via his personal website, Twitter, LinkedIn and Github.
Top comments (0)