Angular pipes

Suggested Videos
Part 15 - Two way data binding in angular 2 | Text | Slides
Part 16 - Angular ngFor directive | Text | Slides
Part 17 - Angular ngFor trackBy | Text | Slides

In this video we will discuss Pipes in Angular with examples.



Pipes in Angular

• Transform data before display
• Built in pipes include lowercase, uppercase, decimal, date, percent, currency etc

• To apply a pipe on a bound property use the pipe character " | "
  <td>{{employee.code | uppercase}}</td>
• We can also chain pipes<td>{{employee.dateOfBirth | date:'fullDate' | uppercase }}</td>
• Pass parameters to pipe using colon " : "
  <td>{{employee.annualSalary | currency:'USD':true:'1.3-3'}}</td>
  <td>{{employee.dateOfBirth | date:'fullDate'}}</td>
  <td>{{employee.dateOfBirth | date:'dd/MM/y'}}</td>
• Custom pipes can be created
• To read more about angular built-in pipes
  

  Pipe	URL
  Date	https://angular.io/api/common/DatePipe
  Decimal	https://angular.io/api/common/DecimalPipe
  Currency	https://angular.io/api/common/CurrencyPipe
  Percent	https://angular.io/api/common/PercentPipe

Please note : If you get the following error, chances are that your date is not in mm/dd/yyyy format. To fix this error please change the date format to mm/dd/yyyy or create a custom pipe
InvalidPipeArgument: '14/10/1980' for pipe 'DatePipe'

Angular Pipe Examples:

uppercase pipe in this example converts employee code to uppercase
<td>{{employee.code | uppercase}}</td>

Output : 


In this example, we have chained date and uppercase pipes.
<td>{{employee.dateOfBirth | date:'fullDate' | uppercase }}</td>

Output : 


In this example we are passing a single parameter to date pipe. With the parameter we specified we want the date format to be dd/mm/yyyy
<td>{{employee.dateOfBirth | date:'dd/MM/y'}}</td>

Output : 


For the list of date pipe parameter values please check the following article
https://angular.io/api/common/DatePipe

In this example we are passing 3 parameters to the currency pipe
<td>{{employee.annualSalary | currency:'USD':true:'1.3-3'}}</td>

1. The first parameter is the currencyCode
2. The second parameter is boolean - True to display currency symbol, false to display currency code
3. The third parameter ('1.3-3') specifies the number of integer and fractional digits

Output :