DEV Community


Angular NgFor Repeater Directive - Loop over a Collection (Angular 6)

loizenai profile image loizenai ・2 min read

In the tutorial, we introduce how to use Angular ngFor, a built-in directive, to iterate over a collection.

Related posts:


  • Node.js – version v10.4.0
  • Angular – version 6
  • Visual Studio Code – version 1.24.0

NgFor Repeater Directive


We create an Angular 6 project as below structure:

Angular-6-ngFor + created-project-structure

Create Angular Project

Generate Angular Project:

Angular-6-ngFor + create-angular-6-project

Generate Customer classes:

Angular-6-ngFor + generate class customer & mock-customers

Implement Mock Data

Create data class in src/app/customer.ts file:

export class Customer {
    id: number;
    firstname: string;
    lastname: string;
    age: number

More at:

Discussion (0)

Editor guide