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]
<!-- app.component.html -->
<h2 style="color: green">
GeeksforGeeks
</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>
// 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"
}
]
}
// 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.
<!-- app.component.html -->
<h2 style="color: green">
GeeksforGeeks
</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>
// 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
}
}
// 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:
