Angular 7|8 ngFor Example

<< Back to Angular Tutorial

In this tutorial, I show you how to use Angular 8 ngFor directive with lots of examples.

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

Check out complete Angular 8 tutorial with examples - Angular 8 Tutorial with Examples.

In the previous tutorial, we have developed an angular8-helloworld-example-tutorial project using Angular 8 Hello World Example Tutorial and we will continue using the same project to demonstrates the usage of the ngFor directive with examples.

Video

This tutorial has explained in below video tutorial on YouTube. Subscribe to our youtube channel for future video updates. 

Create an Angular Component - NgforComponent

Let's create NgforComponent in an existing angular8-helloworld-example-tutorial project with the following command:

C:\Angular\angular8-helloworld-example-tutorial\src\app> ng g c ngfor
CREATE src/app/ngfor/ngfor.component.html (20 bytes)
CREATE src/app/ngfor/ngfor.component.spec.ts (621 bytes)
CREATE src/app/ngfor/ngfor.component.ts (265 bytes)
CREATE src/app/ngfor/ngfor.component.css (0 bytes)
UPDATE src/app/app.module.ts (724 bytes)

ngfor.component.ts - NgforComponent

The ngfor.component.ts file defines the logic associated with NgforComponent. Let's create a users array and we use it in Html template.

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

@Component({
  selector: 'app-ngfor',
  templateUrl: './ngfor.component.html',
  styleUrls: ['./ngfor.component.css']
})
export class NgforComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  users = [{
    id: 100,
    firstName: "Ramesh",
    lastName: "Fadatare",
    emailId: "ramesh@gmail.com"
  },
  {
    id: 101,
    firstName: "Tony",
    lastName: "Stark",
    emailId: "tony@gmail.com"
  }, {
    id: 100,
    firstName: "Tom",
    lastName: "Cruise",
    emailId: "tom@gmail.com"
  }];
}

ngfor.component.html - ngFor Directive Examples

The ngfor.component.html file defines the HTML template associated with the NgforComponent. Refer the comments in this file are self-descriptive. Replace ngfor.component.html file with the following content in it -

<div class="container">

  <h1> ngFor Directive Examples</h1>

  <!-- ngFor Directive with Table Example -->
  <b> ngFor Directive with Table Example</b>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of users">
        <td>{{user.firstName}}</td>
        <td>{{user.lastName}}</td>
        <td>{{user.emailId}}</td>
      </tr>
    </tbody>
  </table>

  <!-- ngFor - simple example -->
  <b> ngFor - simple example</b>
  <ul>
    <li *ngFor="let user of users">
      {{user.firstName}}, {{user.lastName}}
    </li>
  </ul>

  <!-- ngFor - variable ccope example -->
  <b> ngFor - variable ccope example </b>
  <ul>
    <li *ngFor="let user of users" [type]="element">
      {{user.firstName}}, {{user.lastName}}
    </li>
  </ul>

  <!-- ngFor - Get the index of each element example -->
  <b> ngFor - Get the index of each element example </b>
  <ul>
    <li *ngFor="let user of users; let i = index">
      {{i}}. {{user.firstName}}, {{user.lastName}}
    </li>
  </ul>

  <!-- ngFor - first and last variable example  -->
  <b>ngFor - first and last variable example </b>
  <div *ngFor="let user of users; let i = index; let f=first; let l=last;">
    Row {{i}} : Name: {{user.firstName}} {{user.lastName}} , is first row: {{f}}, is last row: {{l}}
  </div>

  <!-- nfFor - even and odd variable example -->
  <b>nfFor - even and odd variable example </b>
  <div *ngFor="let user of users; let i = index; let e=even; let o=odd;">
    Row {{i}} : Name: {{user.firstName}} {{user.lastName}} , is even row: {{e}}, is odd row: {{o}}
  </div>
</div>

app-routing.module.ts - Add Entry Routing

Let's add an entry in app-routing.module.ts file :

{path: 'ng-for', component: NgforComponent}

Here is the complete code:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { NgforComponent } from './ngfor/ngfor.component';
import { NgifComponent } from './ngif/ngif.component';

const routes: Routes = [
  {path: '', component: HelloWorldComponent},
  {path: 'hello-world', component: HelloWorldComponent},
  {path: 'ng-for', component: NgforComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Output

Hit this link in browser: http://localhost:4200/ng-for 

Check out complete Angular 8 tutorial with examples - Angular 8 Tutorial with Examples.

The source code of this tutorial available on my GitHub Repository.

<< Back to Angular Tutorial