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
{ BrowserModule } from
'@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
{}
I hope you are enjoying with this post! Please
share with you friends. Thank you!!