What
Is Pipes in Angular?
“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.
Pipe’s
Key Points - Pipe class implements the “PipeTransform” interfaces transform
method that accepts an input value and returns the transformed result.
There will be one additional argument to the
transform method for each parameter passed to the pipe.
The “@Pipe”
decorator allows us to define the pipe name that is globally available for use
in any template in the across application.
Angular
Built-in Pipes -
1.
DatePipe,
2.
UpperCasePipe,
3.
LowerCasePipe,
4.
CurrencyPipe,
5.
PercentPipe,
6.
JsonPipe,
7.
AsyncPipe,
Why
Use Pipes in Angular?
Sometimes, your data is not displays in the
correct format on the template that time where using pipes. You can also execute
a function in the template to get its returned value.
Example
1 – Pipe
import
{ Pipe, PipeTransform
} from '@angular/core';
@Pipe({
name: 'barcode',
pure: false
})
export
class BarCodePipe
implements PipeTransform
{
transform(value:
string, args:
any[]): string
{
if
(!value) {
return
'';
}
return
"****-****_"
+ (value.length
> 8 ? (value.length
- 8): '')
}
}
What
is Async Pipe?
Angular provides us special kinds of pipe that is
called Async Pipe and the Async pipe subscribes to an Observable or Promise and
returns the latest value it has emitted.
The Async pipe allows us to bind our templates
directly to values that arrive asynchronously manner and this is the great ability
for the promises and observables.
Example
as,
<div
* ngFor="let
user of users | async">
Id- {{user.id }}, Name- {{user.name }}
</div>
Example
2 - Pipe
CREATE the Filter Pipe in Your Apps.
//filter.pipe.ts
import
{ Pipe, PipeTransform
} from '@angular/core';
@Pipe({
name: 'filter'
})
export
class FilterPipe
implements PipeTransform
{
//Transform
transform(items:
any[], searchText:
string): any[]
{
if(!items)
return [];
if(!searchText)
return items;
searchText = searchText.toLowerCase();
return items.filter(
ft =>
{
return
ft.toLowerCase().includes(searchText);
});
}
}
Declarations filter pipe in your app.module.ts -
//app.module.ts
import
{ NgModule } from
'@angular/core';
import
{ FormsModule } from
'@angular/forms';
import
{ BrowserModule } from
'@angular/platform-browser';
import
{ AppComponent } from
'./app.component';
import
{ FilterPipe} from
'./filter.pipe';
@NgModule({
imports: [ BrowserModule,
FormsModule ],
declarations: [ AppComponent,
FilterPipe ],
bootstrap: [ AppComponent
]
})
export
class AppModule
{ }
Use the filter pipe in you HTML components-
//app.component.html
<h4>Search
User -</h4>
<input
[(ngModel)]="searchText"
placeholder="Search..">
<div
*ngFor="let
user of users | filter : searchText">
{{user}}
</div>
I hope you are enjoying with this post! Please share with you friends. Thank you!!