how can I always have two decimals in my label and align the price list

user_9249786 0
Viewed 627

I am implementing an ionic mobile app. in the typescript class of my component I have an array of numbers (prices). some are whole numbers and some are with two decimal places. I want to display this in the component as a column of price list. For this I am using with alignment set to right. For the price list to align properly, I need to display the whole numbers with two zero decimals. How can I do this

type script

price1 = 21.23;
price2 = 20;

in html in ionic component

<ion-grid>
    <on-row>
      <ion-col>
         <ion-label class="ion-text-end">{{price1}}</ion-label>
      </ion-col>
    </on-row>
    <on-row>
      <ion-col>
         <ion-label class="ion-text-end">{{price2}}</ion-label>
      </ion-col>
    </on-row>

</ion-grid>

I want it aligned as,

21.23
20.00

But it's not. Not even the text get aligned to the right.

Can someone advise how I can achieve this please.

ionic-framework css
2 Answers
user_88464400

  • Move ion-text-end class to ion-col (because ion-label display is inline)

  • Use number pipe for formatting numbers

  • Since it's price, I'd recommend using currency pipe (currency pipe use two-decimals as default)

<ion-grid>
    <ion-row>
      <ion-col class="ion-text-end">
         <ion-label >{{price1 | number: '1.2-2'}}</ion-label>
      </ion-col>
    </on-row>
    <ion-row>
      <ion-col class="ion-text-end">
         <ion-label >{{price2 | currency:'USD':'symbol' }}</ion-label>
      </ion-col>
    </ion-row>
</ion-grid>
user_117925770
Related