How to Sort an Array of Objects by String Property value 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. In this article, we will learn how to Sort an array of objects by string property value in Angular. Here, we will sort the object based on the property value of the object rather than the key.

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 create a sort function that will sort the property values.

HTML

<!-- app.component.html -->
<h2 style="color: green">
  GeeksforGeeks
</h2>
<h2>
  Sort array of objects by string
  property value in Angular
</h2>
<div *ngFor="let item of gfg">
    <b>Key:  </b>{{item.key}}
    <b>Value :  </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 implements OnInit {
    gfg: any =
        [
            { key: "3", value: "1700" },
            { key: "4", value: "1900" },
            { key: "2", value: "1400" },
            { key: "1", value: "1300" },
            { key: "7", value: "1200" },
            { key: "9", value: "1800" },
            { key: "8", value: "2100" },
            { key: "5", value: "1100" }
        ]

    ngOnInit() {
        this.gfg.sort(function (a: any, b: any) {
            return a.value - b.value;
        })
    }
}

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 sort the property values using localecompare. It is an inbuilt method in JavaScript that is used to compare any two elements and returns a positive number if the reference string is lexicographically greater than the compare string and a negative number if the reference string is lexicographically smaller than the compare string and zero (0) if the compare and reference strings are equivalent.

HTML

<!-- app.component.html -->
<h2 style="color: green">
  GeeksforGeeks
</h2>
<h2>
  Sort array of objects by string
  property value in Angular
</h2>
<div *ngFor="let item of gfg">
    <b>Key:  </b>{{item.key}}
    <b>Value :  </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 implements OnInit {
    gfg: any =
        [
            { key: "3", value: "1700" },
            { key: "4", value: "1900" },
            { key: "2", value: "1400" },
            { key: "1", value: "1300" },
            { key: "7", value: "1200" },
            { key: "9", value: "1800" },
            { key: "8", value: "2100" },
            { key: "5", value: "1100" }
        ]

    ngOnInit() {
        this.gfg.sort((a: any, b: any) =>
            a.value.localeCompare(b.value));
    }
}

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: