2

I have the following working Aurelia code:

total = 9000;
<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${total}</div>
</div>

What I want to do is use the Numeral.js library in HTML to format the total variable from 9000 to 9000.00. This is what I have tried:

total = 9000;
<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${numeral(${total}).format('0.00')}</div>
</div>

and the following: 

total = 9000;
<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">numeral(${total}).format('0.00')</div>
</div>

but unfortunately, none have worked. I tried using the Numeral library in TypeScript and it works fine. I need this on the HTML though. I'm super responsive so don't hesitate to ask any questions.

sbattou
  • 319
  • 3
  • 18

1 Answers1

3

Use a value converter to wrap the call to numeral.

This is what your value converter will look like. You'll have to add the correct import statement to the file though.

import numeral from 'numeral';

export class CurrencyFormatValueConverter {
  toView(value, format = '0.00') {
    return numeral(value).format(format);
  }
}

Then you'll need to load the value converter in to your view using a require element. 

<require from="./path/to/file'></require>

Then you can use it in your view.

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${total | numeral }</div>
</div>

or you can pass in a custom format as a parameter to override the default:

<div class="row pt-2">
  <div class="col-10 text-right">Amount is</div>
  <div class="col-2 text-right">${total | numeral:'($0,0.00)' }</div>
</div>

Incidentally, you should give our documentation a look, as it actually includes this exact value converter as one of its examples: https://aurelia.io/docs/binding/value-converters#value-converters

Ashley Grant
  • 10,879
  • 24
  • 36
  • Thank you for you answer! I thought it was a one liner. At this point do you recommend just doing the conversion in TypeScript and then passing it as a string to HTML? – sbattou Dec 06 '18 at 20:08
  • 1
    @sbattoh Ashley's approach is absolutely the right way to approach this in any actual application. You probably don't want to touch the value of total, and a value converter is a much better approach, but I can't make that decision for you. Alternatively, you can assign numeral to your view-model, `this.numeral = numeral`, to make your original markup work. This is usually not the right approach, though. – Matthew James Davis Dec 07 '18 at 12:58
  • @MatthewJamesDavis thank you so much for your input. I guess sometimes the best answer is not always the one liner. Also, why do you think that the this.numeral = numeral approach is not the greatest? I'm fairly new to Aurelia – sbattou Dec 07 '18 at 13:29
  • 2
    It isn't idiomatic Aurelia. It also won't be reusable across multiple pages/views in your application. Using a Value Converter gives you the reusability of componentization, and the added perk of "doing it the Aurelia way." Finally, `${numeral(${total}).format('0.00')}` isn't valid Aurelia syntax. You'd have to use `${numeral(total).format('0.00')}`. But still, don't do it that way. – Ashley Grant Dec 07 '18 at 20:51
  • 1
    ^ This. The only time I would use this strategy is if I was creating a reproduction for an issue on GitHub. – Matthew James Davis Dec 08 '18 at 01:58