Beruflich Dokumente
Kultur Dokumente
ConcretePage.com
GET
Angular 2 Decimal Pipe, Percent Pipe and Currency Pipe WHEN YOU PAY WITH PAYPAL ON GEAR
Example SAFE HAI.
*T&C Apply
By Arvind Rai, December 23, 2016
On this page we will provide angular 2 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
DecimalPipe
PercentPipe
CurrencyPipe
Component, Module, Main and index.html using TypeScript
Run Application
References
Download Source Code
s Science with IBM
ata
IBM
Software Used
Find the software used in our demo.
1. Angular 2.3.0
2. TypeScript 2.0.10
Latest Post
3. Node.js 4.6.0
4. NPM 3.10.8 Spring @Bean Annotation
5. Firefox 50.1.0 Spring Boot @ConfigurationP
Example
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. Fly to London
number : A pipe keyword that is used with pipe operator. from Rs14,151
digitInfo : It defines number format.
Fly to London
Now we will understand how to use digitInfo. The syntax for digitInfo is as follows. from Rs35,434
Fly to London
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
from Rs2,619
Find the description.
minIntegerDigits : Minimum number of integer digits. Default is 1.
Top Trends
https://www.concretepage.com/angular-2/angular-2-decimal-pipe-percent-pipe-and-currency-pipe-example 1/8
6/29/2019 Angular 2 Decimal Pipe, Percent Pipe and Currency Pipe Example
minFractionDigits : Minimum number of fraction digits. Default is 0. Angular 2 Radio Button and
maxFractionDigits : Maximum number of fraction digits. Default is 3. Example
num1 = 12.638467846;
{{num1 | number}}
12.638
We will observe that fraction digit has been truncated to count 3, because maximum fraction digit is only 3.
{{num1 | number:'3.2-5'}}
012.63847
In our number, integer part is 12 that is of 2 digits, so adding 0 as prefix, it has been of 3 digits that is 012. This is
because minimum integer digit required is 3.
3. Format '3.2-5'
minIntegerDigits = 3
minFractionDigits = 2
maxFractionDigits = 5
num2 = 0.5;
{{num2 | number:'3.2-5'}}
000.50
https://www.concretepage.com/angular-2/angular-2-decimal-pipe-percent-pipe-and-currency-pipe-example 2/8
6/29/2019 Angular 2 Decimal Pipe, Percent Pipe and Currency Pipe Example
<p> {{num2 | number:'3.2-5'}} </p> Angular 2/4 OnChanges +
<p> {{num1 * num2 | number:'1.3-6'}} </p> SimpleChanges Example
</div>
Angular 2 NgIf Example
`
}) Jackson Ignore Null and Emp
Decimal Pipe
12.638
012.63847
000.50
6.319234
Ad
Advertise on LinkedIn
PercentPipe
Angular PercentPipe 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]
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
minIntegerDigits = 1
minFractionDigits = 0
maxFractionDigits = 3
num1 = 2.5;
{{num1 | percent}}
250%
https://www.concretepage.com/angular-2/angular-2-decimal-pipe-percent-pipe-and-currency-pipe-example 3/8
6/29/2019 Angular 2 Decimal Pipe, Percent Pipe and Currency Pipe Example
maxFractionDigits = 5
num1 = 2.5;
{{num1 | percent:'2.2-5'}}
250.00%
We will observe that there is two digits in fraction part. This is because minimum fraction digits required is 2.
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]]]
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
currencyCode = USD
symbolDisplay = false
minIntegerDigits = 1
https://www.concretepage.com/angular-2/angular-2-decimal-pipe-percent-pipe-and-currency-pipe-example 4/8
6/29/2019 Angular 2 Decimal Pipe, Percent Pipe and Currency Pipe Example
minFractionDigits = 0
maxFractionDigits = 3
cur1 = 0.25;
{{cur1 | currency}}
USD0.25
currencyCode = USD
symbolDisplay = true
minIntegerDigits = 2
minFractionDigits = 2
maxFractionDigits = 4
cur2 = 10.263782;
{{cur2 | currency:'USD':true:'2.2-4'}}
$10.2638
Currency Pipe
INR0.25
INR10.2638
USD0.25
$10.2638
app.component.ts
https://www.concretepage.com/angular-2/angular-2-decimal-pipe-percent-pipe-and-currency-pipe-example 5/8
6/29/2019 Angular 2 Decimal Pipe, Percent Pipe and Currency Pipe Example
<decimal-app> </decimal-app>
<percent-app> </percent-app>
<currency-app> </currency-app>
`
})
export class AppComponent { }
module.ts
main.ts
index.html
<html>
<head>
<title>Angular 2 Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('myApp').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Please Wait...</my-app>
</body>
</html>
Run Application
Find the steps to run the example.
1. Install Node.js and NPM in the system if not already installed. Make sure that Node.js version must be 4.x.x or
higher and NPM version must be 3.x.x or higher.
2. Download the source code using download link given below in the example.
3. Go to the root folder of the project using command prompt and run npm install command.
4. Now run npm start command.
5. Now run index.html file. Find the print screen of the output.
https://www.concretepage.com/angular-2/angular-2-decimal-pipe-percent-pipe-and-currency-pipe-example 6/8