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, exampleUSD
.symbol
(default) -> show the symbol, example$
.symbol-narrow
-> use the narrow symbol for locales that have two symbols for their currency. Example: symbolCA$
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: `` }) export class CurrencyPipeComponent { m: number = 0.248; n: number = 2.3285; }{{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'}}
* 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