Home  >  Angular 4

Angular 2 Decimal Pipe, Percent Pipe and Currency Pipe Example

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.

Software Used

Find the software used in our demo.
1. Angular 2.3.0
2. TypeScript 2.0.10
3. Node.js 4.6.0
4. NPM 3.10.8
5. Firefox 50.1.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; 
Now use Decimal Pipe.
{{num1 | number}} 
Find the output.
12.638 
We will observe that fraction digit has been truncated to count 3, because maximum fraction digit is only 3.

2. Use format '3.2-5' :

minIntegerDigits = 3
minFractionDigits = 2
maxFractionDigits = 5

Now find the number that will be formatted.
num1 = 12.638467846; 
Now use Decimal Pipe.
{{num1 | number:'3.2-5'}} 
Find the output.
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

Now find the number that will be formatted.
num2 = 0.5; 
Now use Decimal Pipe.
{{num2 | number:'3.2-5'}} 
Find the output.
000.50 
Now find the component used in our example.
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;
} 
Find the output.
Decimal Pipe
12.638
012.63847
000.50
6.319234 

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]

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; 
Now use Percent Pipe
{{num1 | percent}} 
Find the output.
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; 
Now use Percent Pipe.
{{num1 | percent:'2.2-5'}} 
Find the output.
250.00% 
We will observe that there is two digits in fraction part. This is because minimum fraction digits required is 2.

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;
} 
Find the output.
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; 
Now use Currency Pipe.
{{cur1 | currency}} 
Find the output.
USD0.25 
2. Use format '2.2-4'

currencyCode = USD
symbolDisplay = true
minIntegerDigits = 2
minFractionDigits = 2
maxFractionDigits = 4

Now find a number that will be changed into currency.
cur2 = 10.263782; 
Now use Currency Pipe.
{{cur2 | currency:'USD':true:'2.2-4'}} 
Find the output.
$10.2638 
Now find the component used in our example.
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;
} 
Find the output.
Currency Pipe
INR0.25
INR10.2638
USD0.25
$10.2638 

Component, Module, Main and index.html using TypeScript


app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
	    <decimal-app> </decimal-app>
	    <percent-app> </percent-app>				
	    <currency-app> </currency-app>
         ` 
})
export class AppComponent { } 
module.ts
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 { } 
main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule); 
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.
Angular 2 Decimal Pipe, Percent Pipe and Currency Pipe Example

References

Angular 2 DecimalPipe
Angular 2 PercentPipe
Angular 2 CurrencyPipe

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI
FIND MORE TUTORILAS








Copyright ©2017 concretepage.com, all rights reserved |Privacy Policy | Contact Us