How to use Angular (6,7) Currency Pipe example

In the tutorial, Grokonez introduces how to use Angular CurrencyPipe with examples.

Related posts:
– Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format
– Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example
– Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example
– Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example

CurrencyPipe

CurrencyPipe transforms a number to a currency string.

Syntax:

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

Input value

Input value has type any .
-> The number to be formatted as currency.

Parameters

– currencyCode is the ISO 4217 currency code
-> Type is string
-> Optional.
-> Default is undefined.

– display is the format for the currency indicator.
-> Type is string or boolean
-> Optional
-> Default is symbol.

• code -> show the code, example USD.
• symbol(default) -> show the symbol, example $.
• symbol-narrow -> use the narrow symbol for locales that have two symbols for their currency. Example: symbol CA$ and the symbol-narrow $
• String -> use the given string value instead of a code or a symbol.

– digitsInfo: decimal representation options.
-> Type is string
-> Optional.
-> Default is undefined.
-> Format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

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

– locale: is a locale code
-> Optional.
-> Default is undefined.

Example

@Component({
  selector: 'currency-pipe',
  template: `

    
    





{{m | currency}}
 
    
    
A: {{m | currency:'CAD'}}
 
    
    
A: {{m | currency:'CAD':'code'}}
 
    
    
B: {{n | currency:'CAD':'symbol':'4.2-2'}}
 
    
    
B: {{n | currency:'CAD':'symbol-narrow':'4.2-2'}}
 
    
    
B: {{n | currency:'CAD':'symbol':'4.2-2':'fr'}}
 
    
    





B: {{n | currency:'CLP'}}
  
`
})
export class CurrencyPipeComponent {
  m: number = 0.248;
  n: number = 2.3285;
}

* Note: Need import locale data for fr language, you can do it manually in src/app/app.module.ts file:

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

Sourcecode

-> Project structure:

-> Results:

– Sourcecode: AngularCurrencyPipe