How to display the currency symbol to the right in Angular

Question

I have to display Euro currency like this : 583 €.

But with this code:

{{ price | currency:\'EUR\':true }}

I get

Answer 1

This is working (angular 6) on html side:

{{ amount | currency: 'EUR':'symbol':undefined:'fr-FR' }}

and on typescript side:

const number = 123456.789;
console.log(new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(number));

123.456,79 €

Answer 2

I just didn't want to use 'fr' local, So :

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

    @Pipe({ name: 'myCurrency' })
    export class MyCurrencyPipe extends CurrencyPipe implements PipeTransform {
    
      transform(value: any, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean, digitsInfo?: string, locale?: string): string | null {
         let result = super.transform(value, currencyCode, display, digitsInfo, locale);
         if (result.charAt(0)==='₽' || result.charAt(0)==='$' ){
           result = result.substr(1)+' ' +result.substr(0,1);
         }else if(result.substr(0,3)==="TJS" || result.substr(0,3)==="RUB"){
           result = result.substr(3) +" "+result.substr(0,3)
         }
         if ( Number(value) >0 ){
           result = "+ "+ result
         }else{
           result = "- "+ result
         }
         return result;
      }

}

Answer 3

I was looking to this answer, and the current version of angular it is possible to define providers for localization and Default currency code.

Like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID, DEFAULT_CURRENCY_CODE } from '@angular/core';

import localePt from '@angular/common/locales/pt';
import { registerLocaleData } from '@angular/common';

// Register the localization
registerLocaleData(localePt, 'pt-BR');

@NgModule({
  declarations: [
    AppComponent,
    NotificationListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
  ],
  providers: [
    {
      provide: LOCALE_ID,
      useValue: 'pt-BR'
     },
     {
       provide: DEFAULT_CURRENCY_CODE,
       useValue: 'BRL'
     },
    DataService,
    NotificationsService,
    GeoLocationService,
  ],
  entryComponents: components,
})

Once done, the utilization is very simple:

<div class="col-12" *ngIf="isContentInsurance.value">
     <h5 class="pull-left">Gst</h5>
     <span class="pull-right">-{{offers.contentInsurance | currency}}</span>
</div>

It is not necessary to create any custom pipeline or different custom action.

Answer 4

Provide LOCALE_ID was not a solution because my application is in english but shows the currency with french locale. So if I set my LOCALE_ID to fr-FR, all my dates are in french, which is not acceptable.

So I simply choose the decimal pipe then I add the symbol at the end.

<div>
    {{ document.totalTaxAmount | number:'1.2-2' }} EUR
</div>

The problem here, if the number is not defined, you will end up with only the symbol. To resolve that issue, I've created a not empty pipe :

@Pipe({
    name: 'notEmpty'
})
export class NotEmptyPipe implements PipeTransform {
    transform(value: any, replaceWith: any = ""): any {
        if (!value) {
            return replaceWith;
        }
        return value;
    }
}

And use it like this :

<div>
    {{ document.totalTaxAmount | number:'1.2-2' | notEmpty: '0' }} EUR
</div>

Answer 5

Since Angular2 RC6 version you can set default locale directly in your app module (providers):

import {NgModule, LOCALE_ID} from '@angular/core';

@NgModule({
  providers: [{
      provide: LOCALE_ID,
      useValue: 'de-DE' // 'de-DE' for Germany, 'fr-FR' for France ...
    },
  ]
})

Afterwards the currency pipe should pick up the locale settings and move the symbol to right:

@Component({
  selector:"my-app",

  template:`
    <h2>Price:<h2>
     {{price|currency:'EUR':true}}
  `
})

Answer 6

Honestly, I couldn't find any in-built way to do it. So created custom pipe called split.

working Demo: http://plnkr.co/edit/KX7hfaV2i7CX2VFobM8R?p=preview

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

@Pipe({name:'split'})
export class ShiftPosition implements PipeTransform {
  transform(items: any[], value: string): string {
      return items.substr(1)+' ' +items.substr(0,1);
  }
}


@Component({
  selector:"my-app",

  template:`
    <h2>Dashboard<h2>
     {{price|currency:'EUR':true|split:price}}
  `
})

export class AppComponent{      
  price=10;
}