How to disable the Default KeyValue Pipe sort in Angular ?
Last Updated :
28 Apr, 2025
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">
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.
HTML
<!-- 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:
Similar Reads
How to get comma separated KeyValue Pipe in Angular ? The KeyValue Pipe is an Angular built-in feature that transforms objects or maps into an array of key-value pairs. We can use the last variable of *ngFor directive to achieve the desired result. We will compare that if the element is last then add a comma. In this article, we will learn how to get a
3 min read
How to Sort List by Date Filter in AngularJS ? AngularJS is a feature-based JavaScript framework that uses various tools to create dynamic single-page web applications. While developing the application we have the requirement to play with the data in AngularJS and sort this list of data by a date properly in descending order. This can be done us
5 min read
Primeng 15- How to Override Default Sort Icon in Angular 15? Angular is a powerful, open-source web application framework maintained by Google. Using angular you can build dynamic, single-page applications (SPAs) with multiple tools and features provided in angular material. Angular supports TypeScript, to provide a strong typing system and improved tooling.S
3 min read
How to iterate Angular Keyvalue Pipe Properties in order? The KeyValue Pipe converts a given Object or Map into an array of key-value pairs. We can use this with the ngFor to loop through the object keys. In this article, we will learn How to iterate angular keyvalue pipe properties in order. Here, the order of sequence will be followed exactly in the same
3 min read
How to Use the Async Pipe in Angular? The AsyncPipe in Angular is a powerful and convenient tool used to handle asynchronous data streams such as observables and promises directly in the component template. It automatically subscribes to observables, renders their values, and updates the view when new data is emitted. This removes the n
3 min read
How to call an Angular Pipe with Multiple Arguments ? Angular Pipes are a way to transform the format of output data for display. The data can be strings, currency amounts, dates, etc. Pipes are simple functions that accept an input and return a transformed value in a more technical understanding. In this article, we will see How to call an Angular Pip
3 min read