In Angular 1, when we want to format the value of an expression for display to the user we use angular Filters. In Angular 2, We use Pipe for the same.
Angular 1 Filters:
HTML:
<p> {{ greetings | reverse }}</p>
Js:
app.filter('reverse', function() {
return function(input, uppercase) {
input = input || '';
var out = '';
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
// conditional based on optional argument
if (uppercase) {
out = out.toUpperCase();
}
return out;
};
});
Angular 2:
HTML:
<p> {{ greetings | reverse }}</p>
TypeScript:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'reverse'})
export class ReversePipe {
transform(input:string): string {
input = input || '';
let out = '';
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
return out;
}
}
By looking at code, one can conclude that both does the same thing. Both have same roles and responsibility. What I want to know is Why they are renamed to Pipe in Angular 2?
pipe
?