Yogesh Chauhan's Blog

KeyValuePipe in Angular 9

in Angular on September 21, 2020

KeyValuePipe in Angular 9

It transforms Object or Map into an array of key value pairs.


{{ input_expression | keyvalue [ : compareFn ] }}

Input value


{ [key: string]: V; [key: number]: V; } | Map	

Parameters

compareFn : Optional. Default is defaultComparator.


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

Description

📌 The output array will be ordered by keys.

By default the comparator will be by Unicode point value.

You can optionally pass a compareFn if your keys are complex types.

Examples


@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

Credit: Angular.io


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
How to convert a number rounding to a specified number of decimals in JavaScript?JavaScriptKilling A Project Part 2: Who should make the decision to kill a project?Miscellaneous3 Ways we can create URLSearchParams Objects in JavaScriptJavaScriptHow does @extend rule work in SCSS (Sass)?SCSSPHP Variables ScopePHPHow to embed YouTube or other video links in WordPress?WordPressWordPress: How to find all posts from a custom post type with specific custom field?WordPressHow to make flexbox items of the same size?CSSGap in Flex?CSSWhat Does Host-Based Intrusion Detection System (HIDS) Mean and What Are Some Advantages Over NIDS?MiscellaneousABS and NEG functions in Envision BasicEnvision BasicEverything you need to know about ANY, SOME and ALL Operators in PostgresPostgres