How to use keyvalue Approach In Angular

In this approach, we have provided objects with keys in a random order like [3,4,2,1]. Now, we will use keyvalue and sort these keys as [1,2,3,4]. We know that keyvalue automatically sorts the object based on keys.

Example 1: This example illustrates the basic rendering of an Object in a Sorted order based upon a Key in Angular.

HTML

<!-- app.component.html -->
<h2 style="color: green">w3wiki</h2> 
<h2> 
      How to render an object in a  
    sorted order based upon key  
    in Angular 
</h2> 
<div *ngFor="let item of gfg |keyvalue  "> 
    <b>{{item.key}}</b> 
       {{set(item.value)}} 
    <div *ngFor="let element of gfg2 |keyvalue  "> 
        <ul> 
            <li> 
                  <b>{{element.key}}</b>  
                    {{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 = 
        { 
            "3": 
            { 
                "course": "Java", 
                "cost": "1000"
            }, 
            "4": 
            { 
                "course": "React", 
                "cost": "1500"
            }, 
            "2": 
            { 
                "course": "Angular", 
                "cost": "1700"
            } 
            , 
            "1": 
            { 
                "course": "CSS", 
                "cost": "800"
            } 
        } 
  
    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

How to render an Object in a Sorted order based upon Key in Angular ?

An Object is a collection of properties, and a property is an association between a name (or key) and a value. A Property’s value can be a function, in which case the property is known as a method. To achieve this, we can display the object’s properties in a particular order, where the order is determined by the values of a chosen key or property. In this article, we will see the different approaches for rendering an object in a sorted order based on the key in Angular.