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

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Create a responsive pricing table using simple HTML and CSSCSSKubernetes vs. Docker? It’s a misleading phraseMiscHow to add AppRoutingModule in Angular application using command line?AngularHow to add multiple components in React app?ReactRBV Framework and closing of big brandsMiscValues and Types Basics in JavaScriptJavaScriptLIMIT and OFFSET in PostgresPostgresWhy do we need HAVING Clause in SQL?SQL/MySQLEverything you need to know about ANY, SOME and ALL Operators in PostgresPostgresA Quick Comparison of JOIN and Subquery in SQLSQL/MySQL4 ways to create Date Objects in JavaScriptJavaScriptHow to apply style to a specific child element using CSS?CSS