Angular pipes
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
On this page of the site you can watch the video online Angular pipes with a duration of hours minute second in good quality, which was uploaded by the user kudvenkat 17 July 2017, share the link with friends and acquaintances, this video has already been watched 124,666 times on youtube and it was liked by 453 viewers. Enjoy your viewing!
