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, duration hours minute second in high quality that is uploaded to the channel Code With Rohini 13 August 2019. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 23 times and liked it 4 visitors.

131