DEV Community

loading...

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

loizenai profile image loizenai ・2 min read

https://grokonez.com/frontend/angular/angular-6/angular-6-ngfor-repeater-directive-loop-over-a-collection

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

Related posts:

Technologies

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

NgFor Repeater Directive

Preparation

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: https://grokonez.com/frontend/angular/angular-6/angular-6-ngfor-repeater-directive-loop-over-a-collection

Discussion (0)

pic
Editor guide