How to disable the Default KeyValue Pipe sort in Angular ?
Last Updated :
06 Dec, 2023
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
< 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 >
|
Javascript
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
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
< 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 >
|
Javascript
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
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:
Share your thoughts in the comments
Please Login to comment...