Angular 4 5 Pipe Filter PipeTransform filter

Filter In Angular 4 and 5 - [Pipe and PipeTransform]

What is Pipes? “Pipes transform displayed values within a template.”

Sometimes, the data is not displays in the well format on the template that time where using pipes. You also can execute a function in the template to get its returned value.

The Pipe class implements the “PipeTransform” interfaces transform method that accepts an input value and returns the transformed result.

The “@Pipe” decorator allows us to define the pipe name that is globally available for use in any template in the across application.

The Angular core “@angular/core” provides two types of filtering features i.e.
ü  Piple and
ü  PipeTransform
To implement filtering features we must import Pipe, PipeTransform modules-
import { Pipe, PipeTransform } from '@angular/core'

Now I am create a steps by steps example to understand filers.

Steps 1 – Firstly I will create the Pipe filter in our app folder.
Customer Properties class looks like -
export class Customers
  id: number
  name: string

CustomerFilterPiple.ts –
import { Pipe, PipeTransform } from '@angular/core'
import { Customers } from '../models/customer'
    name: 'customerfilter'
    pure: false
export class CustomerFilterPipe implements PipeTransform
    transform(items: any[], filter: Customers): any
        if (!items || !filter) { 
            return items;

        return items.filter(item => !== -1); 

Steps 2 - Now, importing filter Pipe class in the app.module.ts class and it looks like –

import { NgModule }       from '@angular/core'
import { BrowserModulefrom '@angular/platform-browser'
import { FormsModule }    from '@angular/forms'
import { HttpModule, JsonpModule } from '@angular/http'
import { AppComponent } from './app.component'
import {MyFilterPipe} from ' ./components/shared/pipe/CustomerFilterPipe'
  bootstrap: [ AppComponent
export class AppModule

Steps 3 - Now, use your pipe filter in the component and its looks like –

import { Component } from '@angular/core'
import {Customers} from '../models/Customers'
       <li *ngFor="let customer of customers | customerfilter:filter"> 
            {{}} - {{}} 
export class CustomerComponent
  filter = {name: 'Anil Singh'};
  customers: Customers[] = [ 
      {id: 1, name: 'Anil Singh'}, 
      {id: 2, name: 'Sunil Singh'}

Example 2

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

    name: 'filter',
    pure: false
export class FilterPipe implements PipeTransform {
    transform(items: any[], term): any {    
        return term ? items.filter(item => item.title.indexOf(term) !== -1)
            : items;

    name: 'sortBy'
export class SortByPipe implements PipeTransform {
    transform(items: any[], sortedBy: string): any {     
        return items.sort((a, b) => {return b[sortedBy] - a[sortedBy]});

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'
import {FilterPipe, SortByPipe} from './pipes'

  selector: 'my-app',
  template: `
    <input name="txtName" [(ngModel)]="txtName">
      <tr *ngFor="let user of users | filter : txtName | sortBy: 'name'">
export class App {
  users = [
      title: 'Sr. Mgr',
      name: "XYZ"
      title: 'Jr. Mgr',
      name: "ABC"
      title: 'S/W Dev',
      name: "IJK"
  constructor() { = `Demo Apps`

  imports: [ BrowserModule, FormsModule ],
  declarations: [App, FilterPipe, SortByPipe],
  bootstrap: [App]
export class AppModule {}

ü  Stayed InformedAngular 4 and Angular 5 Tutorials

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog -
My Books - Book 1 and Book 2

Filter In Angular 4 and 5 - [Pipe and PipeTransform] Filter In Angular 4 and 5 - [Pipe and PipeTransform] Reviewed by Anil Singh on 11:03 PM Rating: (5) Powered by Blogger.