Press "Enter" to skip to content

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

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

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


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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.