Angular Decimal Pipe, Percent Pipe and Currency Pipe Example
June 17, 2020
On this page we will provide Angular Decimal Pipe, Percent Pipe and Currency Pipe example. These Angular API belong to CommonModule
. Decimal Pipe formats a number as decimal number. It uses number keyword. Percent Pipe formats a number as percentage. It uses percent keyword. Currency Pipe formats a number as currency. It uses currency keyword. Decimal Pipe, Percent Pipe and Currency Pipe work on the basis of locale rules. These pipes have default format and we can also provide our own format. These pipes use the internationalization API which is not yet available in all browsers and may require a polyfill. Here on this page we will provide Decimal Pipe, Percent Pipe and Currency Pipe example step by step using typescript.
Contents
Software Used
Find the software used in our demo.1. Angular 9.1.11
2. Node.js 12.5.0
3. NPM 6.9.0
DecimalPipe
DecimalPipe
is an angular Pipe
API and belongs to CommonModule. DecimalPipe
is used to format a number as decimal number according to locale rules. It uses number
keyword with pipe operator. Find the syntax.
number_expression | number[:digitInfo]
Finally we get a decimal number as text. Find the description.
number_expression: An angular expression that will give output a number.
number : A pipe keyword that is used with pipe operator.
digitInfo : It defines number format.
Now we will understand how to use digitInfo. The syntax for digitInfo is as follows.
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
Find the description.
minIntegerDigits : Minimum number of integer digits. Default is 1.
minFractionDigits : Minimum number of fraction digits. Default is 0.
maxFractionDigits : Maximum number of fraction digits. Default is 3.
Now find some sample examples.
1. Using default format:
minIntegerDigits = 1
minFractionDigits = 0
maxFractionDigits = 3
Now find a number that will be formatted.
num1 = 12.638467846;
{{num1 | number}}
12.638
2. Use format '3.2-5' :
minIntegerDigits = 3
minFractionDigits = 2
maxFractionDigits = 5
Now find the number that will be formatted.
num1 = 12.638467846;
{{num1 | number:'3.2-5'}}
012.63847
3. Format '3.2-5'
minIntegerDigits = 3
minFractionDigits = 2
maxFractionDigits = 5
Now find the number that will be formatted.
num2 = 0.5;
{{num2 | number:'3.2-5'}}
000.50
decimalpipe.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'decimal-app', template: ` <h3>Decimal Pipe</h3> <div> <p> {{num1 | number}} </p> <p> {{num1 | number:'3.2-5'}} </p> <p> {{num2 | number:'3.2-5'}} </p> <p> {{num1 * num2 | number:'1.3-6'}} </p> </div> ` }) export class DecimalPipeComponent { num1: number = 12.638467846; num2: number = 0.5; }
Decimal Pipe 12.638 012.63847 000.50 6.319234
PercentPipe
AngularPercentPipe
is an angular Pipe
API that formats a number as a percentage according to locale rules.
It belongs to CommonModule. Find the syntax.
number_expression | percent[:digitInfo]
Find the description.
number_expression: An angular expression that will give output a number.
percent : A pipe keyword that is used with pipe operator and it converts number into percent.
digitInfo: It defines a percentage format. We have described the use of digitInfo in
DecimalPipe
section. It is used with following syntax.
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
Now find some sample examples.
1. Using default format:
minIntegerDigits = 1
minFractionDigits = 0
maxFractionDigits = 3
Now find a number that will be changed into percentage.
num1 = 2.5;
{{num1 | percent}}
250%
2. Use format '2.2-5'
minIntegerDigits = 2
minFractionDigits = 2
maxFractionDigits = 5
Now find the number that will be changed into percentage.
num1 = 2.5;
{{num1 | percent:'2.2-5'}}
250.00%
Now find the component used in our example.
percentpipe.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'percent-app', template: ` <h3>Percent Pipe</h3> <div> <p> {{num1 | percent}} </p> <p> {{num1 | percent:'2.2-5'}} </p> <p> {{num2 | percent:'1.2-5'}} </p> <p> {{num1 * num2 | percent:'1.2-3'}} </p> </div> ` }) export class PercentPipeComponent { num1: number = 2.5; num2: number = 0.5; }
Percent Pipe 250% 250.00% 50.00% 125.00%
CurrencyPipe
CurrencyPipe
is an angular Pipe
API that formats a number as currency using locale rules. It belongs to CommonModule. CurrencyPipe
uses currency
keyword with pipe operator to format a number into currency format. Find the syntax.
number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
Find the description.
number_expression : An angular expression that will give output a number.
currency : A pipe keyword that is used with pipe operator. It formats a number into currency format.
currencyCode : This is the currency code such as INR for Indian rupee, USD for US dollar. Default is USD.
symbolDisplay : Default is false. But if we assign true then it will display currency symbol such as $ for dollar.
digitInfo: It defines a currency format. We have described the use of digitInfo in
DecimalPipe
section. It is used with following syntax.
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
Find some sample examples.
1. Using default format:
currencyCode = USD
symbolDisplay = false
minIntegerDigits = 1
minFractionDigits = 0
maxFractionDigits = 3
Now find a number that will be changed into currency.
cur1 = 0.25;
{{cur1 | currency}}
USD0.25
currencyCode = USD
symbolDisplay = true
minIntegerDigits = 2
minFractionDigits = 2
maxFractionDigits = 4
Now find a number that will be changed into currency.
cur2 = 10.263782;
{{cur2 | currency:'USD':true:'2.2-4'}}
$10.2638
currencypipe.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'currency-app', template: ` <h3> Currency Pipe</h3> <div> <p> {{cur1 | currency:'INR':false}} </p> <p> {{cur2 | currency:'INR':false:'1.2-4'}} </p> <p> {{cur1 | currency}} </p> <p> {{cur2 | currency:'USD':true:'2.2-4'}} </p> </div> ` }) export class CurrencyPipeComponent { cur1: number = 0.25; cur2: number = 10.263782; }
Currency Pipe INR0.25 INR10.2638 USD0.25 $10.2638
Component and Module
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <decimal-app> </decimal-app> <percent-app> </percent-app> <currency-app> </currency-app> ` }) export class AppComponent { }
import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {AppComponent} from './app.component'; import {DecimalPipeComponent} from './decimalpipe.component'; import {PercentPipeComponent} from './percentpipe.component'; import {CurrencyPipeComponent} from './currencypipe.component'; @NgModule({ imports: [BrowserModule], declarations: [AppComponent, DecimalPipeComponent, PercentPipeComponent, CurrencyPipeComponent], bootstrap: [AppComponent] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.

References
Angular DecimalPipeAngular PercentPipe
Angular CurrencyPipe