0.0.4 • Published 4 years ago
ngp-sort-pipe v0.0.4
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 | desc) |
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" }
];
}