python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript 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'
    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!!

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 - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions