Displaying Data with Angular 9/8 ngFor Directive

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.

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":""}
 ]

 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.

<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