Pipes in Angular

Angular Pipes were earlier called filters in AngularJS and called pipes from Angular 2 onwards. It is denoted by symbol |. Pipes makes very easy to format or transform the data value according to our needs. Pipe takes integers, strings, arrays, and date as input separated with |. It transforms the data in the format as required and displays the same in the browser.

Some well known built-in pipes in Angular 8:-

• Lowercase Pipe :-Convert text to lower case
• Uppercase Pipe :- Covert text to upper case
• Date Pipe :- Format date values
• Currency Pipe :-Format numbers in different currencies
• Percent Pipe :- Transform a number into it’s percentage value
• Decimal Pipe :- Formats decimal values
• Json Pipe :- For debugging and displays an object as a Json string.
• Slice Pipe :- Create a new array or string from the given array or string respectively.

Let’s see an example using pipes:

This is the output of the above code.