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">
  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

// 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">
  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

// 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: