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

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:

• Angular 6 Component – How to create & integrate New Angular 6 Component
• Angular 6 Service – with Observable Data for Asynchronous Operation
• Angular NgIf Else Then – NgIf with Observables and Async Pipe (Angular 6)

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:

Create Angular Project

Generate Angular Project:

Generate Customer classes:

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