How to display currency symbol on right or left side by Country in Angular?-CodePudding

I am a newbie in angular. I have a dropdownlist to select country to change currency and a card to display currency. For some countries such as America, England it will display $1000. But I want when I select some country for example Vietnam it will display 1000$. I have no idea for this yet. Can you guys help me, please?

<div id="budget">
    <h2>My budget:</h2>
    <h1>
        {{currency==="USA"? '$' : '£' }}1000 <!--It will display $/£1000-->
        <!-- {{budget | currency}} I tried using currency pipe --> 
        <!-- The currency symbol of Vietnam is VND. I want when I chose VN it will display 1000VND -->
    </h1>
</div>

<select [(ngModel)]="currency">
    <option value="USA">US</option>
    <option value="UK">UK</option>
    <option value="VN">VN</option>
</select>

CodePudding user response：

When using the currencyPipe, you need to specify the locale as that is what determines where the currency symbol will be placed. If you do not specify a locale, it will use your default (usually en-US). You also have to actually load those locales. https://iq.js.org/questions/angular/how-do-you-manually-register-locale-data

When I use locale vi_VN, the currencyPipe displays 123.456,79 $

CodePudding user response：

You should use CurrencyPipe from Angular. That will transform a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

For Example:

    <!--output '$0.26'-->
    <p>A: {{a | currency}}</p>

    <!--output 'CA$0.26'-->
    <p>A: {{a | currency:'CAD'}}</p>

    <!--output 'CAD0.26'-->
    <p>A: {{a | currency:'CAD':'code'}}</p>

    <!--output 'CA$0,001.35'-->
    <p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>

    <!--output '$0,001.35'-->
    <p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>

    <!--output '0 001,35 CA$'-->
    <p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>

    <!--output 'CLP1' because CLP has no cents-->
    <p>B: {{b | currency:'CLP'}}</p>

You can read more about it in CurrencyPipe