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

By Hardik Savani | March 30, 2020 | Category : Angular

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:


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


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]'},




<h1>Angular ngFor Directive Example -</h1>







<tr *ngFor="let student of students">

<td>{{ }}</td>

<td>{{ }}</td>

<td>{{ }}</td>



You can see bellow layout:

I hope it can help you...

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: