Angular NgFor: Everything you need to know

In this tutorial, we are going to learn about the ngFor directive.

We will discover, how we can use the ngFor directive to display multiple elements directly from a JavaScript array. 

Also, we will take a look at the utilities of the ngFor directive, like the index, or even and odd.

When we got the basics, we will move on to some more advanced topics like change-detection and DOM manipulation to tweak the performance of our for-loop using trackBy.

Ready?

Let's get started!

Displaying multiple elements with ngFor

The so-called ngFor directive is a core directive, that comes with the angular framework itself.

We can use this directive, if we want to display a dynamic list, for example, an array of elements on the screen.

This array could look like this example data:

const array = [
 {
  "guid": "900ea552-ef68-42cc-b6a6-b8c4dff10fb7",
  "age": 32,
  "name": "Powers Schneider"
 },
 {
  "guid": "880381d3-8dca-4aed-b207-b3b4e575a15f",
  "age": 25,
  "name": "Adrian Lawrence"
 },
 {
  "guid": "87b47684-c465-4c51-8c88-3f1a1aa2671b",
  "age": 32,
  "name": "Boyer Stanley"
 }
]

And we want the result to be generated HTML that could look like this:

<ul>
    <li>Powers Schneider, 32</li>
    <li>Adrian Lawrence, 25</li>
    <li>Boyer Stanley, 32</li>
</ul>

Using ngFor to render an array

This is exactly what ngFor can do for us. 

All we need to do is to tell the directive, which array to use. 

Let's say we have a component that we call example-component. 

This component has a property that is an array. 

That array could be static and look like the array above or could be filled at runtime. For example when data is received from a REST-API.

Now we want to display that array, which sits in the .ts file of the component

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  array = [
    {
      guid: '900ea552-ef68-42cc-b6a6-b8c4dff10fb7',
      age: 32,
      name: 'Powers Schneider'
    },
    {
      guid: '880381d3-8dca-4aed-b207-b3b4e575a15f',
      age: 25,
      name: 'Adrian Lawrence'
    },
    {
      guid: '87b47684-c465-4c51-8c88-3f1a1aa2671b',
      age: 32,
      name: 'Boyer Stanley'
    }
  ];
}

To display that array, we need to use the ngFor directive in our components' template.

How to use the ngFor directive?

The ngFor directive does create the HTML-Element it is placed in as many times as there are elements in the array.

So to create a list-element for each array element, we place the ngFor directive inside of the li tag.

<ul>
  <li *ngFor="let element of array"></li>
</ul>

The rendered output, give the array above would then look like this:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

But that is not exactly what we want right?

We also want to insert the value of each element in between the tags, right?

Working with each element of the list

Read the full article on malcoded.com!