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

angular-6-7-8-currency-pipe-example---feature-image

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:

angular-6-7-8-currency-pipe-example---project-structure

-> Results:

angular-6-7-8-currency-pipe-example---results

– Sourcecode: AngularCurrencyPipe

0 0 votes
Article Rating
Subscribe
Notify of
guest
2K Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments