Angular pipes

Published: 17 July 2017
on channel: kudvenkat

124,666

453

Text version of the video
http://csharp-video-tutorials.blogspo...

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
   / @aarvikitchen5572

Slides
http://csharp-video-tutorials.blogspo...

Angular 2 Tutorial playlist
   • Angular 2 tutorial for beginners

Angular 2 Text articles and slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
   / kudvenkatarabic

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

Pipes in Angular
1. Transform data before display
2. Built in pipes include lowercase, uppercase, decimal, date, percent, currency etc
3. To apply a pipe on a bound property use the pipe character " | "
{{employee.code | uppercase}}

We can also chain pipes
{{employee.dateOfBirth | date:'fullDate' | uppercase }}

Pass parameters to pipe using colon " : "
{{employee.annualSalary | currency:'USD':true:'1.3-3'}}
{{employee.dateOfBirth | date:'fullDate'}}
{{employee.dateOfBirth | date:'dd/MM/y'}}

Custom pipes can be created

To read more about angular built-in pipes
Date : https://angular.io/api/common/DatePipe
Decimal : https://angular.io/api/common/Decimal...
Currency : https://angular.io/api/common/Currenc...
Percent : https://angular.io/api/common/Percent...

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
{{employee.code | uppercase}}

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

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
{{employee.dateOfBirth | date:'dd/MM/y'}}

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
{{employee.annualSalary | currency:'USD':true:'1.3-3'}}

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

Watch video Angular pipes online without registration, duration hours minute second in high quality. This video was added by user kudvenkat 17 July 2017, don't forget to share it with your friends and acquaintances, it has been viewed on our site 124,666 once and liked it 453 people.

516