Skip to content

Latest commit

 

History

History
126 lines (94 loc) · 3.59 KB

TRANSLATIONS.md

File metadata and controls

126 lines (94 loc) · 3.59 KB

What is this?

This document contains information on how to use translations in the application.

Table of Contents

Basic usage ᐞ

Defining translations in the assets ᐞ

Each language translations are stored in its own JSON file, for example en.json. In this application we are using nested (or so called namespaced-json) format. Below is an example on how to group translation keys correctly.

{
  "component": {
    "some-component": {
      "bar": "bar",
      "foo": "foo"
    }
  }
}

In template files ᐞ

Translations are easy to use with translate pipe:

<div>
  <form>
    <button>{{ 'button.start' | translate }}</button>
  </form>
</div>

Sometimes we need to have params inside the translatable string:

{
  "example": {
    "greeting": "Hello {{name}}!"
  }
}

Then we have to use [translateParams] in template:

<h1 translate
    [translateParams]="{name: 'Arnold'}"
>example.greeting</h1>

In TypeScript code ᐞ

Sometimes we have to use translatable strings straight in our code. Luckily, there is a way to easily maintain these strings with the @biesbjerg/ngx-translate-extract package. What you need to do in the code, is to first import the marker function:

import { marker } from '@biesbjerg/ngx-translate-extract-marker';

Then, when you need to use a string in code, wrap it with the marker function. This way we can automatically keep track on the translation keys with the mentioned package. The function itself does nothing — it only passes the string as a result.

const message = marker('that-form.this-message');

This message variable can now be used as a normal translation tag in component. e.g.

<p>{{ message | translate }}</p>

Workflow ᐞ

Manually tracking all the translatable keys in our templates and code is a pain in the $!@. Eventually some keys will be forgotten from some of our translation files, or some keys turn out to be redundant and forgotten to be deleted.

Fortunately we have a tool to be used when working with translations. @biesbjerg/ngx-translate-extract is set up in the application so, that it will collect all used translation keys and add them to our translation files. It'll also sort the JSON nicely, cleans up unused tags, and keeps the format just like we wanted. All that just in one command:

yarn run extract-translations

Neat right? So recommend workflow with translations is just following:

  1. Add your translations to your templates or code using that marker function.
  2. Run yarn run extract-translations command.
  3. Open your translation files and fill out those empty spots.

With that workflow your translation files will always be synced between different languages and there isn't any redundant translations tags.

Resources ᐞ

Back to resources index - Back to main README.md