Ascending and Descending Sort In Angular

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

Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

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';
}

Arguments

Param	Type	Default Value	Details
collection	`array` or `object`		The collection or object to sort
expression	`string` or `string array`		The key or collection of keys to determine the order
reverse (optional)	`boolean`	false	Reverse sorting order
caseInsensitive (optional)	`boolean`	false	Case 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; }`