Angular 7/8 ngFor Tutorial & Example

In this tutorial, you'll learn about the ngFor directive by example in Angular 7/8.

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 8 tutorial, we'll be learning about the ngFor directive by building a simple example that fetches data and display it in the HTML template.

Let's get started started!

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

What ngFor is Used for?

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

Let's suppose we have an Angular 7/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"}, 
];

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 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 an 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.

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 an 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.

Conclusion

In this quick tutorial, we have learned about the ngFor directive in Angular 7/8. Check out this tutorial for a complete Angular 8 example that demonstrates how we can use ngFor to display an array of fetched data in our HTML template.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status