Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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
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 : 
angular 2 uppercase pipe

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

Output : 
angular 2 pipe chain

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 : 
angular2 date pipe example

For the list of date pipe parameter values please check the following article

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 : 
angular 2 currency pipe example

Angular 2 tutorial for beginners

No comments:

Post a Comment

It would be great if you can help share these free resources