Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example
angular6
4
Male avatar

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

https://grokonez.com/frontend/angular/angular-6/angular-6-keyvalue-pipe-ngfor-loop-through-object-map-example

Angular 6.1 provides a new KeyValue pipe transforms Object or Map into an array of key value pairs. In the tutorial, we will show you how to iterate through Object, Map with KeyValue pipe.

Related posts:
Angular 6 Service – with Observable Data for Asynchronous Operation
Angular 6 Routing/Navigation – with Angular Router Service
Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

Related pages:

KeyValue Pipe

Transforms Object or Map into an array of key value pairs ->
{{ input_expression | keyvalue [ : compareFn ] }}

Input value

Input can be null, objects, or maps ->
null | { [key: string]: V; [key: number]: V; } | Map

Comparator Function

compareFn function is optional, used to sort the converted array based upon unicode point values of keys.

(a: KeyValue, b: KeyValue) => number

  • keys are numbers -> sorted by ascending order.
  • keys are strings -> sorted by alphabetical order.
  • key is undefined or null -> displayed at last.

Angular KeyValue pipe has defaultComparator function to sort the key value array.
We can re-implement a new compareFn if our keys are complex types.

Practice

We create an Angular keyvalue-pipe component that uses KeyValue pipe to iterate through an Object and Map ->

KeyValuePipe Component class

keyvalue-pipe.component.ts ->


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

@Component({
  selector: 'app-keyvalue-pipe',
  templateUrl: './keyvalue-pipe.component.html'
})
export class KeyvaluePipeComponent{

  constructor() { }

  object: { [key: number]: string } =
  {
    1: 'Property 1',
    2: 'Property 2',
    3: 'Property 3'
  };
 
  map = new Map([
    [4, 'Four'],
    [6, 'Six'],
    [5, 'Five'],
  ]); 
 
  desc = (a, b) => {
    if(a.key 

KeyValuePipe style

keyvalue-pipe.component.html ->

code class="language-html"><h3>Object with Keyvalue pipe</h3>
<div *ngFor="let item of object | keyvalue">
    key: {{item.key}} - value: {{item.value}}
</div>
 
<h3>Map with Keyvalue pipe - Desc Order</h3>
<div *ngFor="let item of map | keyvalue:desc">
    key: {{item.key}} - value: {{item.value}}
</div>  

-> Results:

angular-6-keyvalue-pipe-ngfor-loop-through-object-map-results

Sourcecode

Project structure ->

angular-6-keyvalue-pipe-ngfor-loop-through-object-map-angular-project-structure

SourceCode:

Angular6-KeyValue-Pipe

https://grokonez.com/frontend/angular/angular-6/angular-6-keyvalue-pipe-ngfor-loop-through-object-map-example

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

159 bài viết.
62 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 5 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 4 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 4 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/frontend/angular/angular6/kotlinspringbootangular6crudhttpclientmysqlexamplespringdatajparestapisexample Kotlin Spring Boot +...
loveprogramming viết 2 ngày trước
0 0
Male avatar
0 0
https://ozenero.com/angular6elasticsearchexampledocumentspaginationwithscroll In the post, we had known how to get All Documents in Index. This An...
loveprogramming viết 4 ngày trước
0 0
Male avatar
0 0
Angular 6 HttpClient Crud + Node.js Express Sequelize + MySQL Get/Post/Put/Delete RestAPIs https://grokonez.com/frontend/angular/angular6/angular6...
loveprogramming viết 14 ngày trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
159 bài viết.
62 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á!