ngp-sort-pipe

Angular Sort/OrderBy Pipe (Angular v5+)

Demo & Code Sample

https://stackblitz.com/edit/angular-sort-orderby-pipe

Install

npm install ngp-sort-pipe --save

Usage

In HTML template

{{ collection | sortBy : asc|desc }} {{ collection | sortBy : asc|desc :
column/property_name }}

Arguments

Param	Type	Details
collection	array or object	The collection or array to sort
order	string	The Sort Order (asc
property_name (optional)	string	Name of Property to sort by

Import NgpSortModule to your module

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app";
 
import { NgpSortModule } from "ngp-sort-pipe";
 
@NgModule({
  imports: [BrowserModule, NgpSortModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

And use pipe in your component

import { Component } from "@angular/core";
 
@Component({
  selector: "example",
  template: `
    <h1>One dimensional Array</h1>
    <ul>
      <li *ngFor="let s of clientScrips | sortBy: 'asc'">{{ s }}</li>
    </ul>
    <h1>Array of Objects (JSON)</h1>
    <h2>Sort by name</h2>
    <ul>
      <li *ngFor="let s of data | sortBy: 'asc':'name'">
        {{ s.id }}-{{ s.name }}
      </li>
    </ul>
    <h2>Sort by id</h2>
    <ul>
      <li *ngFor="let s of data | sortBy: 'desc':'id'">
        {{ s.id }}-{{ s.name }}
      </li>
    </ul>
  `
})
export class AppComponent {
  clientScrips = ["html", "css", "javascript", "angular", "react"];
  data = [
    { id: 100, name: "Mike" },
    { id: 104, name: "John" },
    { id: 102, name: "David" },
    { id: 101, name: "Jane" },
    { id: 103, name: "Steve" }
  ];
}