Angular 2 CurrencyPipe space between currency and number?

Question

I noticed that there is a pipe called CurrencyPipe in Angular 2, which will filter some decimals from a number. This also adds the ISO currency indicator, ie \'USD\' or any othe

Answer 1

You may solve this problem using a bit of clever CSS using the first-letter pseudo element, add a class to your span:

<span class="price">{{ product.price | currency:'USD':true }}</span>

and in your css add:

.price {
  display: inline-block;
}

.price::first-letter {
  padding-right: 0.3em;
}

The first rule makes sure your price in a block container box (::first-letter does work on inline display blocks), and the second rule adds a bit of extra padding after the currency symbol.

You can tweak this to your liking ...

Answer 2

This isn't possible since the CurrencyPipe relies on Intl.NumberFormat and there is no options for this.

That said you can switch to display $ instead of USD with the symbolDisplay parameter set to true:

<span>{{ product.price | currency:'USD':true }}</span>

This will display: $123 which is a bit better ;-) If this doesn't suit you, you need to implement a custom pipe to format your number...

See these links for more details:

• https://github.com/angular/angular/blob/master/modules/angular2/src/facade/intl.ts#L70
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

Answer 3

Make your own custom currency pipe.

import { Pipe, PipeTransform } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Pipe({ name: 'myCurrency' })
export class MyCurrencyPipe implements PipeTransform {
    transform(num: any, currencyCode: string, showSymbol: boolean, digits: string): any {
        let value = new CurrencyPipe(navigator.language).transform(num, currencyCode, showSymbol, digits);
        let firstDigit = value.match(/\d/);
        let symbol = value.slice(0, firstDigit.index);
        let amount = value.slice(firstDigit.index);   
        return symbol + " " + amount;
    }
}

and use it in HTML like

{{amount | myCurrency: currencyCode :true:'1.0-2'}}

Answer 4

Adding a space in the symbol section will also work. See below.

<strong class="d-inline-block">{{ amount | currency:"USD":"USD " }}</strong>

Answer 5

Do you really need to use currency pipe? You can always separate the currency from the amount :

<span class="price">{{ product.currency }} {{ product.price|number:'1.2-2'}}</span>

or in your case :

<span class="price">USD {{ product.price|number:'1.2-2'}}</span>

Answer 6

You can override the pipe as follows. Make sure you include this in the module

import {Pipe, PipeTransform} from "@angular/core";
import {CurrencyPipe} from "@angular/common";


@Pipe({name: 'currency'})
export class MyCurrencyPipe extends CurrencyPipe implements PipeTransform {
  transform(value: any, currencyCode: string, symbolDisplay: boolean, digits: string): string {
    const currencyFormat = super.transform(value, currencyCode, symbolDisplay, digits);
    const firstDigit = currencyFormat.search(/\d/);
    return currencyFormat.substring(0, firstDigit) + ' ' + currencyFormat.substr(firstDigit);
  }
}