Create filter Pipe in Angular5

dfAngular Pipe:-

A pipe takes in data as input and transforms it to a desired output. In this page, you'll use pipes to transform a component's Array of object data into filterd Array order (ascending /descending).

Create pipe using cli

ng g pipe filter-data

write below code in filter-data.pipe.ts file

import { Pipe, PipeTransform } from '@angular/core';

import { retry } from 'rxjs/operator/retry';

@Pipe({

name: 'filterData'

})

export class FilterDataPipe implements PipeTransform {

transform(items: any[], f: any, key?: string, keyF?: string): any[] {

if (items && Array.isArray(items)) {

if (Array.isArray(f)) {

let allFilter = [];

if (keyF) f.forEach((obj) => { allFilter.push(obj[keyF]); });

else allFilter = f;

if (key) {

return items.filter((it) => {

return allFilter.includes(it[key])

});

}

else {

return items.filter((it) => {

return allFilter.includes(it)

})

}

}

else {

if (key) {

return items.filter((it) => {

return it[key] === f

});

}

else {

return items.filter((it) => {

return it === f

})

}

}

}

return [];

}

}

Write below code where you want to sort data(In component html)

1. Filter in Array of string:- e.g. var arr=['om', 'prakash', 'pandey']

<div class="mdl-cell mdl-cell--4-col">

<mat-form-field class="mat-form-field-custom">

<input matInput placeholder="Search by Audit Name" [(ngModel)]="searchText">

<mat-icon matSuffix>search</mat-icon>

</mat-form-field>

</div>

<div class=" mdl-cell mdl-cell--3-col mdl-cell--8-col-tablet

mdl-cell--12-col-phone matrix-names"

*ngFor="let name of (arr | filterData : searchText)">{{ name }}

</div>

1. Filter in Array Of Objects:-  e.g. var userList=[{name:'om'}, {name: 'prakash'} , {name: 'pandey'}]

<div class="mdl-cell mdl-cell--4-col">

<mat-form-field class="mat-form-field-custom">

<input matInput placeholder="Search by Audit Name" [(ngModel)]="searchText">

<mat-icon matSuffix>search</mat-icon>

</mat-form-field>

</div>

<div class=" mdl-cell mdl-cell--3-col mdl-cell--8-col-tablet

mdl-cell--12-col-phone matrix-names"

*ngFor="let user of (userList | filterData : searchText : 'name')">{{ user.name }}

</div>

1. Filter in Array Of Objects:-  e.g. var userList=[{name:'om'}, {name: 'prakash'} , {name: 'pandey'}] and input filter is object then in last parameter define the KEY by which you want to search
2. Filter in Array Of Objects:-  e.g. var userList=[{name:'om'}, {name: 'prakash'} , {name: 'pandey'}] and input filter is also an array of object(for multi select dropdown) then second parameter is an Array of Object andn last parameter defined the KEY by which you want to search........

Create Sorting Pipe in Angular5

Angular Pipe:-

A pipe takes in data as input and transforms it to a desired output. In this page, you'll use pipes to transform a component's Array of object data into sorting order(ascending/descending).

Create pipe using cli

ng g pipe order-by

write below code in order-by.pipe.ts file

import { Pipe, PipeTransform } from '@angular/core';

import { retry } from 'rxjs/operator/retry';

@Pipe({

name: 'orderBy'

})

export class OrderByPipe implements PipeTransform {

transform(items: any[], key?: string, order?: string, typeOf?: string): any[] {

if (items && Array.isArray(items)) {

let asc = (order != 'dsc') ? -1 : 1, c, d;//c,d update only value not reffrence

return items.sort(function (a, b) {

if (key)

c = a[key], d = b[key];

else

c = a, d = b;

if (typeOf === 'date') {

c = typeof (c) === 'string' ? new Date(c) : c;

d = typeof (d) === 'string' ? new Date(d) : d;

}

else if (typeOf === 'number') {

c = parseFloat(c);

d = parseFloat(d);

}

return (c > d) ? (asc * -1) : (c < d ? asc : 0);

});

}

return [];

}

}

Write below code where you want to sort data(In component html)

<div *ngFor="let detail of auditSiteData | orderBy:'audit_date':'asc':'date'">

{{detail.audit_date }}

</div>