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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #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
You might also like these
What is Prototypal Inheritance in JavaScript?JavaScriptWhat Is a Graph Database?MiscellaneousHow to get the full URL of current page in PHP?PHPHow to swap images on hover using CSS?CSSURL paths in DrupalDrupalHow to import MySQL small sample database into phpMySQL?SQL/MySQLThe SQL EXISTS OperatorSQL/MySQLHTML canvas methodsHTMLAdd animated hamburgers menu using Hamburgers collection on GitHubCSSWhat’s the difference between variables in CSS and SCSS (Sass)?CSSJavaScript: how to detect a browser using the user agent?JavaScriptWhat are components in Angular?Angular