pipes in angular 4 - Tutorial

For Consultation : +91 9887575540

Stay Connected :

What is Angular 4 pipes:

1.A pipe is to format the value of an expression displayed in the view.

2.The framework comes with multiple predefined pipes, such as date, currency, lowercase, uppercase, and others.

3.Syntax: {{expression | pipeName:inputParam1}}

4.If the pipe takes multiple inputs, they can be placed one after another separated by a colon

5.Example : {{fullName | slice:0:20}}

6.pipes is that they can be chained, wherein the output from one pipe can serve as the input to another pipe.

7.We can create custom pipes also.

Commonly used pipes

  • date: As we just saw, the date filter is used to format the date in a specific manner.
  • uppercase and lowercase: These two pipes, as the name suggests, change the case of the string input.
  • decimal and percent: decimal and percent pipes are there to format decimal and percentage values based on the current browser locale.
  • currency: This is used to format numeric values as a currency based on the current browser locale. {{14.22|currency:”USD” }} {{14.22|currency:”USD”:true}}
  • json: This is a handy pipe for debugging that can transform any input into a string using JSON.stringify.

Example of date pipe operator:

Angular 5 Online Training

Angular 5 Online Training

Select your currency