@ember-intl/decorators


This addon provides utility decorators to use ember-intl with ES6 class syntax.

Installation

Install ember-intl and @ember-intl/decorators:

ember install ember-intl @ember-intl/decorators

Usage

@t

Decorator version of the ember-intl translationMacro. Implicitly injects the intl service. Creates a computed property that depends on the current locale and any keys that you pass as the second parameter.

import Component from '@ember/component';
import { t } from '@ember-intl/decorators';

class ExampleComponent extends Component {
  name = 'Tom';

  @t('messages.welcome', { firstName: 'name' }) message; // => 'Welcome, Tom!'
}

Using the raw helper you can pass static values as well:

import Component from '@ember/component';
import { t, raw } from '@ember-intl/decorators';

class ExampleComponent extends Component {
  name = 'Tom';

  @t('messages.greeting', {
    firstName: 'name',
    timeOfDay: raw('morning')
  })
  message; // => 'Good morning, Tom!'
}

@intl

A generic decorator that implicitly injects the intl service and creates a computed property that depends on the current locale and any further optional dependent keys passed to the decorator.

The decorated method or (arrow) function is bound to the class instance the decorator is used on and invoked with two parameters:

• intl: the intl service, that you can use to call any method on
• propertyKey: the name of the decorated property

The return value is used as the value of the computed property.

import Component from '@ember/component';
import { intl } from '@ember-intl/decorators';

class ExampleComponent extends Component {
  amount = 1.23;
  currency = 'EUR';

  @intl('amount', 'currency')
  formatted = intl =>
    intl.formatNumber(this.amount, {
      style: 'currency',
      currency: this.currency
    });
}