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!!
|
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..
|