Angular NgFor Repeater Directive - Loop over a Collection (Angular 6)
angular ngfor
1
repeater
1
Male avatar

loveprogramming viết ngày 16/03/2021

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
}

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


import { Customer } from './Customer';
 
export const CUSTOMERS: Customer[] = [
      {id: 1, firstname: 'Mary', lastname: 'Taylor', age: 24},
      {id: 2, firstname: 'Peter', lastname: 'Smith', age: 18},
      {id: 3, firstname: 'Lauren', lastname: 'Taylor', age: 31}
];

*ngFor

Iterate over Array Data

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


import { Component, OnInit } from '@angular/core';

import { Customer } from './customer';
import { CUSTOMERS } from './mock-customers';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{

  customers: Customer[];

  constructor() { }

  ngOnInit() {
    this.customers = CUSTOMERS;
  }
}

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

<h1>Customer List</h1>
<ul>
  <li *ngFor="let customer of customers">
    {{ customer | json }}
  </li>
</ul>

-> result:

Angular-6-ngFor + display-data

Iterate over Observable Data

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

import { Component, OnInit } from '@angular/core';

import { Observable, of } from 'rxjs';

import { Customer } from './customer';
import { CUSTOMERS } from './mock-customers';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{

  observableCustomers: Observable;

  constructor() { }

  ngOnInit() {
    this.observableCustomers = of(CUSTOMERS);
  }
}

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

<h1>Customer List</h1>
<ul>

  <li *ngFor="let customer of observableCustomers | async">
    {{ customer | json }}
  </li>
</ul>

-> 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:


.even { color: blue; }
.odd { color: goldenrod; }

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

<h1>Customer List</h1>
<ul>
  <li *ngFor="let customer of observableCustomers | async; index as i; odd as odd; even as even" 
                [ngClass]="{ odd: odd, even: even }">
                {{i}} --- {{ customer | json }}
  </li>
</ul>

-> 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:


<li *ngFor="let item of items; index as i; trackBy: trackByFunction">...</li>

Now, create a trackByFunction function in AppComponent class:


trackByFunction(index, customer) {
  return customer.id;
}

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

<h1>Customer List</h1>
<ul>
  <li *ngFor="let customer of observableCustomers | async; index as i; odd as odd; even as even;
                trackBy as trackByFunction" 
                [ngClass]="{ odd: odd, even: even }">
                {{i}} --- {{ customer | json }}
  </li>
</ul>

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:

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ng-template>

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

<ng-template ngFor let-customer [ngForOf]="observableCustomers | async"
                    let-i="index" let-odd="odd" let-even="even"
                    [ngForTrackBy]="trackByFunction">
  <li [class.odd]="odd" [class.even]="even">
      {{i}} --- {{ customer | json }}
  </li>
</ng-template>

SourceCode

How to run the below sourcecode:

1. Download Angular-6-NgFor.zip file -> Then extract it to Angular-6-NgFor folder.
2. Go to Angular-6-NgFor folder
3. Run the app by commandline: ng serve --open

-> Source Code:

Angular-6-NgFor

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

444 bài viết.
77 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
444 bài viết.
77 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!