Angular NgFor Example | NgFor Directive In Angular 10/9/8

Hi All,

I am going to explain you example of angular ngfor example. you can understand a concept of how to use ngfor in angular 8. it's simple example of angular 9 ngfor tutorial. let’s discuss about angular ngfor directive example.

You can use ngFor directive in angular 6, angular 7, angular 8, angular 9 and angular 10 application.

Angular provide set of pre define directive and in this tutorial i will give you simple example of *ngFor. ngFor allows us to build data presentation lists and tables in HTML template.

Let's see bellow example:

src/app/app.component.ts

import { Component } from '@angular/core';
   
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  
  students = [
    {id: 1, name: 'Hardik', email: '[email protected]'},
    {id: 2, name: 'Vimal', email: '[email protected]'},
    {id: 3, name: 'Harshad', email: '[email protected]'},
  ]
   
}

src/app/app.component.html

<h1>Angular ngFor Directive Example - ItSolutionstuff.com</h1>
  
<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr *ngFor="let student of students">
    <td>{{ student.id }}</td>
    <td>{{ student.name }}</td>
    <td>{{ student.email }}</td>
  </tr>
</table>

You can see bellow layout:

I hope it can help you...