Angular Pipes Part 19

Published: 13 August 2019
on channel: Code With Rohini

This video is about Pipes in Angular.
To learn Angular2 from scratch and for beginners Please see the link below:
• What is AngularJS and What is Angular...
Watch More Videos On: / @codewithrohini1636

To read more about pipes please see below links:
https://angular.io/guide/pipes

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...

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 " | "
{{hero.name | uppercase}}

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

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

Angular Pipe Examples:

uppercase pipe in this example converts hero names to uppercase
{{hero.name | uppercase}}

In this example, we have chained date and uppercase pipes.
{{birthday | 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
{{birthday | 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
{salary | 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.

Custom pipes can be created

Watch video Angular Pipes Part 19 online without registration, duration hours minute second in high quality. This video was added by user Code With Rohini 13 August 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 23 once and liked it 4 people.