Angular Pipes Part 19

Опубликовано: 13 Август 2019
на канале: 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

Смотрите видео Angular Pipes Part 19 онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Code With Rohini 13 Август 2019. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 23 раз и оно понравилось 4 посетителям.

131