How to disable the Default KeyValue Pipe sort in Angular ?
The KeyValue Pipe converts a given Object or Map into an array of key-value pairs. For this, we can disable the sorting in keyvalue pipe sort by passing 0 with it. This article will cover disabling the default keyvalue pipe sort in Angular, along with a basic understanding of their implementation with the help of suitable examples.
Syntax
The below syntax describes the sorting of the default keyvalue pipe:
<div *ngFor="let item of gfg| keyvalue:0">
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Project Structure
It will look like the following:
Example 1: In this example, we will see that keyvalue will be automatically sorting the object if we don’t pass 0 with it. Also, an object has keys in any random manner like [3,4,2,1,7,9,8,5]. But in output, you will see that keys are like [1,2,3,4,5,7,8,9]
HTML
<!-- app.component.html --> < h2 style = "color: green" > w3wiki </ h2 > < h2 > Disable the default keyvalue pipe sort in angular </ h2 > < div * ngFor = "let item of gfg" > < div * ngFor = "let element of item|keyvalue" > < b >Key: </ b >{{element.key}} < b >Value : </ b >{{element.value}} </ div > </ div > |
Javascript
// app.component.ts import { Component, OnInit } from '@angular/core' ; import { KeyValue } from '@angular/common' ; import { Pipe, PipeTransform } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: "./app.component.html" , styleUrls: [ './app.component.css' ] }) export class AppComponent { gfg: any = [ { "3" : "Java" , "4" : "React" , "2" : "C++" , "1" : "HTML" , "7" : "Python" , "9" : "CSS" , "8" : "Javascript" , "5" : "Angular" } ] } |
Javascript
// app.module.ts import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { HttpClientModule } from '@angular/common/http' ; import { AppComponent } from './app.component' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Example 2: In this example, we will disable the auto-sorting of keyvalue by passing 0.
HTML
<!-- app.component.html --> < h2 style = "color: green" > w3wiki </ h2 > < h2 > Disable the default keyvalue pipe sort in angular </ h2 > < div * ngFor = "let item of gfg |keyvalue : zero" > < b >{{item.key}}:</ b > {{item.value}} </ div > |
Javascript
// app.component.ts import { Component, OnInit } from '@angular/core' ; import { KeyValue } from '@angular/common' ; import { Pipe, PipeTransform } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: "./app.component.html" , styleUrls: [ './app.component.css' ] }) export class AppComponent { gfg: any = { "html" : "Hyper Text Markup Language" , "css" : "Cascade Style Sheet" , "xml" : "Xtensive Markup Language" , "js" : "Javascript" } zero() { return 0 } } |
Javascript
// app.module.ts import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { HttpClientModule } from '@angular/common/http' ; import { AppComponent } from './app.component' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Contact Us