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.