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 angular 2 have some additional pipes names
that are async, decimal, percept and so on. And also some of pipes not
supported in angular 2 that are number, orderBy and filter and these are
archiving using “custom pipes”.
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.
For
example as,
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 a pure and impure pipe?
In Angular 2, there are two types of pipes i.e.
1.
pure
2.
impure
The pure pipe is by default. Every pipe has been
pure by default. If you want to make a pipe impure that time you will allow the
setting pure flag to false.
Pure
Pipes:-
Angular executes a pure pipe only when it detects
a pure change to the input value. A pure change can be primitive or
non-primitive.
Primitive data are only single values, they have
not special capabilities and the non-primitive data types are used to store the
group of values.
For
example for pipe pure,
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'barcode'
})
export class BarCodePipe implements
PipeTransform {
transform(value: string, args:
any[]): string {
if (!value) {
return '';
}
return "****-****_" + (value.length > 8 ? (value.length - 8): '')
}
}
Impure
Pipes:-
Angular executes an impure pipe during every
component change detection cycle. An impure pipe is called often, as often as
every keystroke or mouse-move.
If you want to make a pipe impure that time you
will allow the setting pure flag to false.
For
example for pipe impure,
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): '')
}
}
Angular
2 Built-in Pipes:-
1.
DatePipe,
2.
UpperCasePipe,
3.
LowerCasePipe,
4.
CurrencyPipe,
5.
PercentPipe,
6.
JsonPipe,
7.
AsyncPipe,
8.
And so on..
The following table shows a comparison between
Angular 1.x and Angular 2.
I hope you are enjoying with this post! Please
share with you friends. Thank you!!