ember-intl

Appearance

{{format-message}}

Formats a string with the ICU message syntax.

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

interface ExampleSignature {
  Args: {};
}

const descriptor = {
  defaultMessage:
    '{name} took {numPhotos, plural, =0 {no photos} =1 {one photo} other {# photos}} on {timestamp, date, long}.',
  description: 'A summary of the photoshoot from this week',
  id: 'photoshoot-summary',
};

const today = new Date();
const yesterday = new Date(today.valueOf() - 24 * 60 * 60 * 1000);

const Example: TOC<ExampleSignature> = <template>
  <div>
    {{formatMessage descriptor name="Sonja" numPhotos=12 timestamp=yesterday}}
  </div>

  <div>
    {{formatMessage descriptor name="Chris" numPhotos=0 timestamp=yesterday}}
  </div>

  <div>
    {{formatMessage descriptor name="Maki" numPhotos=1 timestamp=today}}
  </div>
</template>;

export default Example;

Pass message only ​

@formatjs/intl's formatMessage() requires an object called descriptor. In the simplest form, descriptor has the following type:

ts
interface MessageDescriptor {
  defaultMessage?: string;
  description?: string;
  id?: string;
}

ember-intl's formatMessage() allows you to pass just the translation message.

gts
import { formatMessage } from 'ember-intl';

<template>
  {{formatMessage
    "<em>{numPhotos, number} photos taken.</em>"
    htmlSafe=true
    numPhotos=3
  }}
</template>

For more information, see Advanced - Auto-generating keys.

options.htmlSafe ​

To render an HTML in a translation message, set htmlSafe to true.

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

interface ExampleSignature {
  Args: {};
}

const descriptor = {
  defaultMessage: '<em>{numPhotos, number} photos taken.</em>',
  description: 'A short summary of the photoshoot from this week',
  id: 'photoshoot-short-summary',
};

const Example: TOC<ExampleSignature> = <template>
  {{formatMessage descriptor htmlSafe=true numPhotos=3}}
</template>;

export default Example;