Angular Currency Pipe Example

Angular Currency Pipe Example
In Angular, We have a few built-in pipes. In this blog post, we'll learn about Currency Pipe in Angular.

We'll see an example of using Currency Pipe with different formats.

In Angular, Pipe is something that takes in data as input and transforms it to the desired output.




Currency Pipe

It transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.


CurrencyPipe is an API provided by angular. It is part of angular CommonModule.

CurrencyPipe is Parameterized Pipe. Parameterized Pipe accepts any number of optional parameter to get the desired output from the given input.

To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as currency:'4.3-5'). 

If the pipe accepts multiple parameters, separate the values with colons (such as currency:'4.5-5':'fr').


Format

{{ value_expression | currency [ :currencyCode [ :display  [ : digitsInfo [ : locale ] ]]] }}




The basic format of CurrencyPipe is as above.

value_expressionthe number to be formatted as a currency.

currency: A pipe keyword that is used with pipe operator.

currencyCode: The currency code, i.e USD for US dollar or EUR for the Euro.

display: the format for the currency indicator. 
          
  1. code: Show the code (such as USD).
  2. symbol(default): Show the symbol (such as $).
  3. symbol-narrow: Use the narrow symbol for locales that have two symbols for their currency. For example, the Canadian dollar CAD has the symbol CA$ and the symbol-narrow $. If the locale has no narrow symbol, uses the standard symbol for the locale.
  4. String: Use the given string value instead of a code or a symbol. For example, an empty string will suppress the currency & symbol.
  5. Boolean (marked deprecated in v5): true for symbol and false for code.digitsInfo: Decimal format representation in string format.
      Default Value is "symbol".


digitsInfo:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.


  • minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.
  • minFractionDigits: The minimum number of digits after the decimal point. Default is 0.
  • maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.

locale: A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.


CurrencyPipe Example


1) No Formatting

It will use the default value for parameters.

Here the display property will be assigned a default value as "symbol". so it will show the symbol for CAD.
In this example, it will show CA$.

minIntegerDigits: 1
minFractionDigits: 0
maxFractionDigits: 3
currecnyCode: USD
display: symbol

Now declare the number in a component that will be formatted.

   number1: number = 0.259;

Now use a currency pipe to format the number in template file as below:

  {{number1 | currency }} 

Output:

  $0.26


2) currency: 'CAD'

It will use the following value for parameters.

Here the display property will be assigned a default value as "symbol". so it will show the symbol for CAD.
In this example, it will show CA$.

minIntegerDigits: 1
minFractionDigits: 0
maxFractionDigits: 3
currencyCode: CAD
display: symbol


Now declare the number in a component that will be formatted.

   number1: number = 0.259;

Now use a currency pipe to format the number in the template file as below:

  {{number1 | currency:'CAD'}} 

Output:

  CA$0.26



3) currency: 'CAD':'code'

It will use the following values for parameters.

Here we have assigned value "code" to display property. so it will show the code but not a symbol.
In this example, it will show CAD.

minIntegerDigits: 4
minFractionDigits: 5
maxFractionDigits: 5
currencyCode: CAD
displaycode

Now declare the number in a component that will be formatted.

   number1: number = 0.259;

Now use a currency pipe to format the number in the template file as below:

  {{number1 | currency:'CAD':'code'}} 

Output:

  CAD0.26



4)  currency:'CAD':'symbol':'4.2-2'

It will use the following values for parameters.

Here we have assigned value "symbol" to display property. so it will show the symbol for CAD.
In this example, it will show CA$.

minIntegerDigits: 4
minFractionDigits: 2
maxFractionDigits: 2
currencyCode: CAD
displaysymbol


Now declare the number in a component that will be formatted.

   number1: number = 0.259;

Now use a percent pipe to format the number in template file as below:

  {{number1 | currency:'CAD':'symbol':'4.2-2'}} 

Output:

  CA$0,001.35



5) currency:'CAD':'symbol-narrow':'4.2-2'

It will use the following values for the parameters.

Here we have assigned value "symbol-narrow" to display property. so it will use the narrow symbol for the locale which has two symbols for their currency.

If a locale has no narrow symbol, then it will user the standard symbol for their locale.

In this example, the Canadian dollar CAD has the symbol CA$ and the symbol-narrow $. so it will show $.



minIntegerDigits: 4
minFractionDigits: 2
maxFractionDigits: 2
currencyCode: CAD
displaysymbol-narrow

Now declare the number in a component that will be formatted.

   number1: number = 3.5;

Now use a decimal pipe to format the number in template file as below:

  {{number1 | currency:'CAD':'symbol-narrow':'4.2-2'} 

Output:

  $0,001.35


6) currency:'CAD':'symbol':'4.2-2':'fr'

It will use the following values for parameters.


minIntegerDigits: 4
minFractionDigits: 2
maxFractionDigits: 2
currencyCode: CAD
displaysymbol
locale: fr

Now declare the number in a component that will be formatted.

   number1: number = 3.5;

Now use a decimal pipe to format the number in template file as below:

  {{number1 | currency:'CAD':'symbol':'4.2-2':'fr'}} 

Output:

  0 001,35 CA$






Angular Currency Pipe Example Angular Currency Pipe Example Reviewed by Borad Akash on November 18, 2018 Rating: 5

No comments:

Powered by Blogger.