Displaying Data with Angular 9/8 ngFor Directive

Last updated on by Digamber
In this tutorial, we are going to learn how to display data in Angular 9 HTML template using *ngFor directive.

We’ll are going to cover the following topics:

  • What is the role of ngFor and how it is used in Angular?
  • How to display data using Angular ngFor syntax?
  • What is the ngFor directive scope?
  • How to get the index position of every element using ngFor loop?
  • How to get the first and last element in a data collection using the ngFor loop?

I assume you have already installed the Angular 9 app.

Let’s take one step further to become the expert in the ngFor directive in Angular.

What is the role of ngFor and how it is used in Angular?

Angular is a prevalent framework in the web development domain. It offers tons of built-in directive to deal with any programming situation.

We are going to learn about one such a directive, which is known as ngFor. The *ngFor=”…” syntax is used to iterate over an array or even an object to produce a template of list items.

It is considered the angular core directive and ngFor syntax is attach with lists and tables in HTML templates

In the Angular JS version, the ngFor directive was known as ng-repeat, but ngfor in Angular 2 version got a new name and ngfor work the same way as it used to be.

The HTML ul li tag helps ngfor to iterate over a collection of data and display on the front-end of the application, which is an angular’s core philosophy.

How to display data using Angular ngFor syntax?

Now, we are going to display the employee data using the given below JavaScript array of objects.

// Employee Data

const Employee = [
    {"id":"1","employee_name":"WdqBvFe","employee_salary":"797","employee_age":"36","profile_image":""},
    {"id":"1925","employee_name":"Menaka6","employee_salary":"24501","employee_age":"24501","profile_image":""},
    {"id":"1969","employee_name":"2381","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"1970","employee_name":"6132","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"1972","employee_name":"2022","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"1973","employee_name":"4604","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"1976","employee_name":"Shylu","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"1977","employee_name":"8221","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"1981","employee_name":"111test","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"1996","employee_name":"test-709","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"1997","employee_name":"test-654","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"1999","employee_name":"test-127","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"2001","employee_name":"test-301","employee_salary":"123","employee_age":"23","profile_image":""},
    {"id":"2003","employee_name":"1769","employee_salary":"123","employee_age":"23","profile_image":""}
 ]

With the help of the ngFor directive, we are going to iterate the Employees array and show the data in the Angular template using the HTML table or unordered or ordered list (ul li or ol li).

<ul>
    <li *ngFor="let employee of Employee ">
        <h3>{{employee.id}}</h3>
        <p> {{employee.employee_name}} </p>
        <p> {{employee.employee_salary}} </p>
        <p> {{employee.employee_age}} </p>
        <p> {{employee.profile_image}} </p>
    </li>
</ul>

What is the ngFor directive scope?

When we are working with the ngFor directive, we should also be aware of its scope.

The variable we use to display the data with ngFor is only available to its scope. It similarly works the way other method works to iterate over a data collection in different programming languages.

For example, this will be a valid syntax:

<ul>
    <li *ngFor="let employee of Employee ">
        <h3>{{employee.id}}</h3>
        <p> {{employee.employee_name}} </p>
    </li>
</ul>

It can not be defined like this:

<ul>
    <li *ngFor="let employee of Employee ">
    </li>
    <h3>{{employee.id}}</h3>
    <p> {{employee.employee_name}} </p>
</ul>

How to get the index position of every element using ngFor loop?

Let’s suppose if we need to get the index of every array item.

To get the index of every item is easy with ngFor and index variable. We can assign the other variable with the ngFor directive, as mentioned below.

<ul>
    <li *ngFor="let employee of Employee: let i = index">
        <strong>{{i}}</strong>
        <p> {{employee.employee_name}} </p>
    </li>
</ul>

How to get the first and last element in a data collection using the ngFor loop?

We can also find the first or the last item from a data collection; ngFor is an absolute directive. It returns the value in a boolean form, either true or false, based on the first or last value.

If we want to assign any specific class to the first or last item, using this technique, we can create multiple classes and assign them to the first or last value.

<ul>
    <li 
      *ngFor="let employee of Employee: 
      let first = first; 
      let last = last"
      [ngClass]="{ first: first, last: last }">
    </li>
</ul>

It will not apply any CSS class if the element is neither first nor the last item.

Conclusion

Finally, the Angular 9/8 ngFor tutorial is over. In this quick tutorial, we have got a chance to learn how to use ngFor directive to iterate over an array or object data.

Avatar
Digamber

Digamber Rawat is from Uttarakhand, located in northwestern part of India. He is a Full-stack developer by profession and a primary author of this blog.