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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #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

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
FULL OUTER JOIN in PostgresPostgresWhat’s new in WordPress 5.5?WordPressHow to create a flip effect with CSS?CSSKilling A Project Part 2: Who should make the decision to kill a project?MiscellaneousRelative Length Units in CSSCSSList of social media icon logo color codes in HEXMiscellaneousThe Difference Between the echo and print Commands in PHPPHPHow to render lists inside a component in React?ReactHow to send and receive query strings via links in Angular 9?AngularHow to use images instead of HTML radio buttons using CSS?CSSHow to add Go Back button in Swift 5?Swiftuser_can vs current_user_can in WordPressWordPress