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'
 
@Pipe({ 
    name: 'customerfilter'
    pure: false
})
 
export class CustomerFilterPipe implements PipeTransform
    transform(items: any[], filter: Customers): any
        if (!items || !filter) { 
            return items;
        }

        return items.filter(item => item.name.indexOf(filter.name) !== -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'
 
@NgModule({ 
  imports:
    BrowserModule
    FormsModule
    HttpModule
    JsonpModule 
  ], 
  declarations:
    AppComponent
    MyFilterPipe 
  ], 
  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'
 
@Component({ 
  template:
    <h2>Customers</h2> 
    <div> 
      <ul> 
       <li *ngFor="let customer of customers | customerfilter:filter"> 
            {{customer.id}} - {{customer.name}} 
       </li>  
      </ul> 
    </div>`
})
export class CustomerComponent
  filter = {name: 'Anil Singh'};
 
  customers: Customers[] = [ 
      {id: 1, name: 'Anil Singh'}, 
      {id: 2, name: 'Sunil Singh'}
  ] 
}  

Example 2

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

@Pipe({
    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;
    }
}

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

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

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

@NgModule({
  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

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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^