Skip to content

{{format-number}}

Uses Intl.NumberFormat to format a number.

gts
import type { TOC } from '@ember/component/template-only';
import { formatNumber } from 'ember-intl';

interface ExampleSignature {
  Args: {};
}

const Example: TOC<ExampleSignature> = <template>
  {{formatNumber 12345}}
</template>;

export default Example;

options.format

In app/ember-intl.{js,ts}, you can use the formatNumber key to define the formats that you want to reuse for the helper. Pass the name of your format to format.

gts
import type { TOC } from '@ember/component/template-only';
import { formatNumber } from 'ember-intl';

interface ExampleSignature {
  Args: {};
}

const Example: TOC<ExampleSignature> = <template>
  {{formatNumber 12345 format="EUR"}}
</template>;

export default Example;
ts
import type { Formats } from 'ember-intl';

export const formats: Formats = {
  formatNumber: {
    EUR: {
      currency: 'EUR',
      style: 'currency',
    },
  },
};

options.locale

You can display the text in another locale (i.e. independently from the user's preferred locale). Pass the name of the locale to locale.

gts
import type { TOC } from '@ember/component/template-only';
import { formatNumber } from 'ember-intl';

interface ExampleSignature {
  Args: {};
}

const Example: TOC<ExampleSignature> = <template>
  <div lang="en-us">
    {{formatNumber 12345 locale="en-us"}}
  </div>

  <div lang="de-de">
    {{formatNumber 12345 locale="de-de"}}
  </div>
</template>;

export default Example;

Additional options

You can use named arguments to pass options that Intl.NumberFormat supports. Some of these options are listed below.

  • currency
  • maximumFractionDigits
  • maximumSignificantDigits
  • signDisplay
  • style
gts
import type { TOC } from '@ember/component/template-only';
import { formatNumber } from 'ember-intl';

interface ExampleSignature {
  Args: {};
}

const Example: TOC<ExampleSignature> = <template>
  {{formatNumber
    12345
    currency="EUR"
    maximumFractionDigits=1
    notation="compact"
    roundingMode="ceil"
    style="currency"
  }}
</template>;

export default Example;