python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions