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
}
Top comments (0)