Search code examples
javascripthtmlangularjsangular-filters

AngularJS Currency Filter - Euro

I am using AngularJS currency filter and am having problems displaying the Euro sign correctly.

The HTML:

{{ price.priceTotal | currency: myController.getPriceCurrency() }}

Controller:

getPriceCurrency() {
    return `€ `;
}

Note - In the above method I am just returning the code for the Euro symbol, but the currency returned by this method can be any, depending on the currency selected.

The problem I have is that the currency symbol does not display properly. It is displaying as € 50for example, but I want it to display as € 50. I have tried to set the return in getPriceCurrency method to the euro sign € directly, however that would end up being displayed as ??? (three question marks) once the code is deployed.

Are there any other workarounds I can do to get euro and other currencies symbols displaying properly?

Thanks

Solution

  • I managed to solve it by using ng-bind-html:

    ng-bind-html="myController.price | currency: myController.getPriceCurrency()"

    This treated my currency as HTML and displayed it correctly.