Translation files

The translation texts are stored in JSON files:

// app.en.json
{
  "version": "1.0.0",
  "title": "Application Name",
  "welcome": "Welcome, {{ name }}!"
}

The texts may contain placeholders for values to insert runtime. Double curly brackets mark the placeholders in the text and are identified by names or ordered indeces:

{{name}} {{ dateOfBirth }} or {{0}} {{ 1 }} {{  2  }}

See the Parameter interpolation panel for more details.

The translation texts are referred in the Angular app by their keys. The key consists of the name of the translation file and the name of the JSON property separated by a dot. The texts in the above example can be referred by the following keys:

'app.version', 'app.title', 'app.welcome'

The JSON objects can be nested:

// app.en.json
{
  "version": "1.0.0",
  "home": {
    "title": "Application Name",
    "welcome": "Welcome, {{ name }}!"
  }
}

In this case the keys will be:

'app.version', 'app.home.title', 'app.home.welcome'

You can use an extended translation file names in similar way:

// app.auth.en.json
{
  "userid": "User name",
  "pwd": "Password",
  "errors": {
    "failed": "The credentials are wrong!"
  }
}

Then the keys will be:

'app.auth.userid', 'app.auth.pwd', 'app.auth.errors.failed'

The section prefixes of lazy loaded modules will not be part of the keys.

Using a format other than JSON requires to create a custom translation converter.