import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'orderBy'
})
export class OrderPipe implements PipeTransform {
transform(value: any, ...args: any[]): any {
const sortOrder = args[0].sortOrder;
const columnName = args[0].columnName;
if (columnName) {
const desc = !(sortOrder === 'asc');
return value.sort(
(a: any, b: any) =>
!desc
? this.OrderByComparator(a[columnName], b[columnName])
: -this.OrderByComparator(a[columnName], b[columnName])
);
} else {
return value;
}
}
public OrderByComparator(a: any, b: any): number {
if (typeof a === 'string') {
return this.typeofString(a, b);
} else if (typeof a === 'number') {
return this.typeofNumber(a, b);
} else {
return this.typeofDate(a, b);
}
}
private typeofNumber(a: number, b: number): number {
if (!a || !b) {
return -1;
}
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
return 0; // equal each other
}
private typeofDate(a: Date, b: Date): number {
if (!a || !b) {
return -1;
}
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
return 0; // equal each other
}
private typeofString(a: string, b: string): number {
if (!a || !b) {
return -1;
}
if (a.toLowerCase() < b.toLowerCase()) {
return -1;
}
if (a.toLowerCase() > b.toLowerCase()) {
return 1;
}
return 0; // equal each other
}
}
------------- Component -----------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public sort;
private _columnName: string;
public data: Array<Employee> = [
{
name: 'Ashutosh',
dob: new Date('08/11/1987'),
id: 10001,
accountnumber: 'a123logq',
salary: 209.92
},
{
name: 'Shivangi',
dob: new Date('08/11/1986'),
id: 10003,
accountnumber: 'a123logq',
salary: 209.01
},
{
name: 'Abhishek',
dob: new Date('08/11/1985'),
id: 10002,
accountnumber: 'm123logq',
salary: 209.21
},
{
name: 'Halrgen',
dob: new Date('08/11/1992'),
id: 10004,
accountnumber: 'a123logx',
salary: 100.91
},
{
name: 'Kevin',
dob: new Date('08/11/1982'),
id: 10005,
accountnumber: 'a123dmgq',
salary: 208.92
},
{
name: 'Ram',
dob: new Date('08/11/1988'),
id: 10006,
accountnumber: 'c123chnq',
salary: 206.92
},
{
name: 'Laxman',
dob: new Date('08/11/1981'),
id: 10007,
accountnumber: 'b123iuwq',
salary: 209.32
},
{
name: 'Ullas',
dob: new Date('08/11/1985'),
id: 10091,
accountnumber: 'b123iuwq',
salary: 309.32
}
];
constructor() {
this.sort = { sortOrder: 'asc', columnName: 'name' };
}
public onAscending() {
this.sort = { sortOrder: 'asc', columnName: this._columnName };
}
public onDescending() {
this.sort = { sortOrder: 'desc', columnName: this._columnName };
}
public onSelectSortColumn(columnName: any) {
this._columnName = columnName;
}
}
interface Employee {
name: string;
dob: Date;
id: number;
accountnumber: string;
salary: number;
}
--------------------- Component Template ------------------------
<div class="container">
<div class="row" style="margin-top:20px">
<div class="col-md-12"></div>
<button class="btn btn-primary" (click)="onAscending()">Ascending</button>
<button class="btn btn-primary" (click)="onDescending()">Descending</button>
<select class="form-control" style="width: 200px" (change)="onSelectSortColumn($event.target.value)">
<option value="name">Name</option>
<option value="id">Employee Id</option>
<option value="dob">DOB</option>
<option value="accountnumber">Account Number</option>
<option value="salary">Salary</option>
</select>
</div>
<br>
<div class="row">
<div class="table-responsive">
<table class="table" >
<tr>
<th>Id</th>
<th>Name</th>
<th>DOB</th>
<th>Account Number</th>
<th>Salary</th>
</tr>
<tr *ngFor="let user of data | orderBy : sort">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.dob | date}}</td>
<td>{{user.accountnumber}}</td>
<td>{{user.salary}}</td>
</tr>
</table>
</div>
</div>
