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

{{data|currency:'GBP'}} you can use instead to {{data|currency:'GBP':}}

Answer 2

Changes for Angular v5 and up

---

The DISPLAY parameter is changed from boolean to string

display string | boolean

The format for the currency indicator. One of the following:

• code: Show the code (such as USD).
• symbol(default): Show the symbol (such as $).
• 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.
• String: Use the given string value instead of a code or a symbol. For example, an empty string will suppress the currency & symbol.

• Boolean (marked deprecated in v5): true for symbol and false for code.

  Optional. Default is 'symbol'.

Docs: https://angular.io/api/common/CurrencyPipe

---

No custom pipes needed

You can overwrite the currency & symbol with the string format.

String: Use the given string value instead of a code or a symbol. For example, an empty string will suppress the currency & symbol.

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

Answer 3

Create a new pipe that receive the currency as input.

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

@Pipe({
    name: 'space'
})
export class SpacePipe implements PipeTransform {
   transform(value: any, args?: any): any {
       console.log(value.substring(0, 1) + ' ' + value.substring( 1));
       return value.substring(0, 1) + ' ' + value.substring( 1);
   }
}

After that you can call them like this

{{discount | currency: 'EUR' | space}}

Dont forget to include it in @NgModule -> declarations

Answer 4

Just concatenate the space as shown in the code below. It works`s for me. I am using Angular 6 by the way.

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