1

I am using ngx-translate for the internalization of my angular application. I have added a dropdown that has 3 languages(fr, de and en). On language switching, I want to change the currency symbol. I have added a custom pipe also but, it's not working.

table.component.html
 <p>{{'company' | translate}}</p>  - this value is changing
 <p>{{payment.amount | mycurrency}}</p> - this value is not changing



mycurrency.ts

import { Pipe, PipeTransform } from '@angular/core';
import { formatCurrency, getCurrencySymbol } from '@angular/common';
import { DEFAULT_LANGUAGE } from '@ngx-translate/core';
@Pipe({
    name: 'mycurrency',
})
export class MycurrencyPipe implements PipeTransform {
    code: any;
    constructor() {
        if (localStorage.getItem("language") == 'fr' || localStorage.getItem("language") == 'de') {
            this.code='EUR';
        }
        else {
            this.code ='USD';
        }
    }

    transform(
        value: number,
        currencyCode: string = this.code,
        display:
            | 'code'
            | 'symbol'
            | 'symbol-narrow'
            | string
            | boolean = 'symbol',
        digitsInfo: string = '3.2-2',
        locale: string = localStorage.getItem("language"),
    ): string | null {
        console.log("Ds");
        return formatCurrency(
            value,
            locale,
            getCurrencySymbol(currencyCode, 'wide'),
            currencyCode,
            digitsInfo,
        );
    }
}
'''


2 Answers2

0

You can use getCurrencySymbol. Check this example for more.

https://stackblitz.com/edit/angular-currency-symbol-pipe-9pvmdc

sam_dev
  • 151
  • 2
  • 9
0

You can use the angular currency pipe

table.component.html

<p>
    {{payment.amount | currency:currencyCode}}
</p>

currencyCode can be the variable containing the standard currency code('USD', 'EURO', 'INR' etc), or you can assign this from your dropdown.

Check the below example

https://stackblitz.com/edit/angular-rj7e4t

Chandan S
  • 143
  • 9