@npm-polymer/app-localize-behavior

Polymer.AppLocalizeBehavior

Polymer.AppLocalizeBehavior wraps the format.js library to help you internationalize your application. Note that if you're on a browser that does not natively support the Intl object, you must load the polyfill yourself. An example polyfill can be found here.

Polymer.AppLocalizeBehavior supports the same message-syntax of format.js, in its entirety; use the library docs as reference for the available message formats and options.

Sample application loading resources from an external file:

<dom-module id="x-app">
   <template>
    <div>{{localize('hello', 'name', 'Batman')}}</div>
   </template>
   <script>
      Polymer({
        is: "x-app",

        behaviors: [
          Polymer.AppLocalizeBehavior
        ],

        properties: {
          language: {
            value: 'en'
          },
        }

        attached: function() {
          this.loadResources(this.resolveUrl('locales.json'));
        },
      });
   &lt;/script>
</dom-module>

Alternatively, you can also inline your resources inside the app itself:

<dom-module id="x-app">
   <template>
    <div>{{localize('hello', 'name', 'Batman')}}</div>
   </template>
   <script>
      Polymer({
        is: "x-app",

        behaviors: [
          Polymer.AppLocalizeBehavior
        ],

        properties: {
          language: {
            value: 'en'
          },
          resources: {
            value: function() {
              return {
                'en': { 'hello': 'My name is {name}.' },
                'fr': { 'hello': 'Je m\'apelle {name}.' }
              }
          }
        }
      });
   &lt;/script>
</dom-module>