Angular NgFor Example | NgFor Directive In Angular 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 and angular 9 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: 'hardik@gmail.com'},

{id: 2, name: 'Vimal', email: 'vimal@gmail.com'},

{id: 3, name: 'Harshad', email: 'harshad@gmail.com'},

]

}

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...




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: