Ascending and Descending Sort In Angular | ngx-order-pipe

Angular 5+ order by pipes enables users to order their collection by field.

order by pipe in angular, angular orderby, angular orderby pipe example, ascending and descending sort in angular

How to make use of it:

Install:

npm install ngx-order-pipe --save

1. Import OrderModule to your module.

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app';

import { OrderModule } from 'ngx-order-pipe';

@NgModule({
  imports: [BrowserModule, OrderModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. And use pipe in your component.

import { Component } from '@angular/core';

@Component({
  selector: 'example',
  template: `
    <ul>
      <li *ngFor="let item of array | orderBy: order">
        {{ item.name }}
      </li>
    </ul> 
  `
})

export class AppComponent {
  array: any[] = [{ name: 'John'} , { name: 'Mary' }, { name: 'Adam' }];
  order: string = 'name';
}

Read More – Fully-Interactive and Accessible HTML Tables In Pure JavaScript | Datatable.js

Arguments

ParamTypeDefault ValueDetails
collectionarray or object The collection or object to sort
expressionstring or string array The key or collection of keys to determine the order
reverse (optional)booleanfalseReverse sorting order
caseInsensitive (optional)booleanfalseCase insensitive compared to sorting
comparator (optional)Function Custom comparator function to determine the order of value pairs. Example: (a, b) => { return a > b ? 1 : -1; }

Angular 5+ Order By Pipe, ngx-order-pipe Plugin/Github

Check More – 

Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library
Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js


See Demo And Download

Official Website(VadimDez): Click Here

This superior jQuery/javascript plugin is developed by VadimDez. For extra advanced usage, please go to the official website.

Share