Angular pipes

Text version of the video
http://csharp-video-tutorials.blogspot.com/2017/07/angular-pipes.html

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.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

Slides
http://csharp-video-tutorials.blogspot.com/2017/07/angular-pipes_17.html

Angular 2 Tutorial playlist
https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6

Angular 2 Text articles and slides
http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists

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/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
{{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