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 order as given in JSON.

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 display the keyvalue automatically sort the JSON based upon keys, and will find that data is appearing in a different order than that provided in the JSON object.

HTML

<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
  How to iterate angular keyvalue
  pipe properties in order?
</h2>

<div *ngFor="let item of gfg |keyvalue">
    <b>{{item.key}}</b>
    {{set(item.value)}}
    <div *ngFor="let element of gfg2 |keyvalue ">
        <ul>
            <li>{{element.value}}</li>
        </ul>
    </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 =
        {
            "car":
            {
                "color": "red",
                "model": "2013"
            },
            "motorcycle":
            {
                "color": "pink",
                "model": "2016"
            },
            "bicycle":
            {
                "color": "green",
                "model": "2011"
            }
        }
    gfg2: any
    set(obj: any) {
        this.gfg2 = obj
    }
}

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: We can notice that even in JSON object order was ‘car,motorcycle,bicycle’ , but keyvalue sorted these objects based upon keys like ‘bicycle,car,motorcycle’.

Example 2: In this example, we will create a function keepOrder and call it with keyvalue. We have implemented this function in the ts file, by receiving 2 KeyValue pairs and simply returning 0.

HTML

<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
  How to iterate angular keyvalue
  pipe properties in order?
</h2>

<div *ngFor="let item of gfg |keyvalue :keepOrder">
    <b>{{item.key}}</b>
    {{set(item.value)}}
    <div *ngFor="let element of gfg2 |keyvalue :keepOrder ">
        <ul>
            <li>{{element.value}}</li>
        </ul>
    </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 =
        {
            "car":
            {
                "color": "red",
                "model": "2013"
            },
            "motorcycle":
            {
                "color": "pink",
                "model": "2016"
            },
            "bicycle":
            {
                "color": "green",
                "model": "2011"
            }
        }
    gfg2: any
    set(obj: any) {
        this.gfg2 = obj
    }
    keepOrder =
        (x: KeyValue<string, any>, y: KeyValue<string, any>): number => {
        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:  We can see that objects appeared the same way as mentioned in the JSON as ‘car,motorcycle,bicycle’