Styling the NumberFormat in JavaScript
Setting the content of an element with a number formatted with Indian currency
Updated
•1 min read
A
I am a web developer from Navi Mumbai.
Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud.
Founder of nerul.in and gaali.in
If you ever wanted to display a number (amount) in Indian currency format and you have the number in a template variable as total like {{ total }}, then here’s a quick way to go using AlpineJS’s x-text to replace the server-side rendered content.
<td x-text="new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format({{ total }})">
₹{{ total }}
</td>
NumberFormat has been supported on all browsers for a long time now.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
