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

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:

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:

Mock Customer data in src/app/mock-customers.ts file:

*ngFor
Iterate over Array Data

Modify app.component.ts file to provide array data:

-> Modify template app.component.html file, using *ngFor:

-> result:

Angular-6-ngFor + display-data

Iterate over Observable Data

– Modify app.component.ts file to provide Observable data:

-> Modify template file app.component.html with async pipe:

-> result:

Angular-6-ngFor + display-data

NgForOf with Local Variables

NgForOf provides several exported values:

  • $implicit: T -> Individual items’s value in the iterable
  • ngForOf: NgIterable: -> The value of iterable expression.
  • index: number: -> index value
  • first: boolean: -> true if it is the first item.
  • last: boolean: -> true if it is the last item.
  • even: boolean: -> true if the item has an even index.
  • odd: boolean: -> true if the item has an odd index.

All above exports can be aliased to local variables.

Practice :

-> Modify style file app.component.css as below:

-> Modify template file app.component.html as below:

-> result:

Angular-6-ngFor + display-data-in-web-browser

Track By

Angular uses object identity to track insertions and deletions within the iterator and reproduce the changes in the DOM. Angular provides a way to customize the default tracking algorithm by trackBy option. trackBy takes a function with two arguments: index and item.

-> Syntax:

Now, create a trackByFunction function in AppComponent class:

Add trackBy to template file app.component.html as below:

What is the benefit of trackBy option?
-> trackBy returns a unique identifier that helps Angular to locate that DOM node associated with the object much faster, and reuse the component in the DOM which should it need to be updated (NOT destroy or rebuild).
trackBy is used for performance optimization

Ng-Template element

To resolve the conflict between the template tag and the html template standard tag, Angular provides its own implementation: ng-template tag.
Angular provides * asterisk (*ngFor) as a shorthand syntax for the ng-template element. So the compiler will transform *ngFor to ng-template.

-> Syntax:

Now, we modify the template file app.component.html as below:

SourceCode

How to run the below sourcecode:

-> Source Code:

Angular-6-NgFor

By JavaSampleApproach | June 18, 2018.

Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*