YogeshChauhan . com

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

dreamhost

Most Read

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

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

How to create a new HTML element programmatically using JavaScript?HTMLHow to add navigation menu in Angular 9 app?AngularColumn and Table Alias in PostgresPostgresSorting Arrays in JavaScriptJavaScriptHow to modify the latest post array using get_posts() in WordPress?WordPressHow to change style of all direct children of an element using jQuery?jQueryHow to create a flip effect with CSS?CSSWhat is a Strict Requirement in PHP 7 Function Declarations?PHPHow to draw an SVG path on scroll using JavaScript?JavaScriptHow to auto-resize textarea based on text input using JavaScript or jQuery?JavaScriptHow to Sort (Shuffle) an Array in Random Order in JavaScript?JavaScriptWhat are Identifiers in JavaScript?JavaScript