transloco

The transloco preset supports Transloco in Angular projects.

Detection

The preset applies when the project depends on @jsverse/transloco or @ngneat/transloco.

import { transloco } from '@x18n/cli/presets'
import { defineConfig } from '@x18n/core'

export default defineConfig({
  presets: [transloco()],
})

Locale files

If your config has no resources, the preset uses src/assets/i18n/{locale}.json and src/assets/i18n/{namespaces}/{locale}.json.

A scope folder is a key prefix in camelCase, as Transloco names it: the preset sets namespace.fromPath to camel, so src/assets/i18n/todos-page/en.json holds the keys todosPage.*. For a scope with an alias, add a resource with a fixed namespace: { pattern: 'src/assets/i18n/todos-page/{locale}.json', namespace: 'todos' }.

Supported syntax

In HTML templates, the preset reads the transloco pipe, the transloco attribute directive, and t(...) calls. The read option of the structural directive *transloco is a key prefix. It applies from the directive to the next *transloco with read, or to the end of the file:

<h1>{{ 'title' | transloco }}</h1>
<p transloco="intro"></p>
<div *transloco="let t; read: 'admin'">
  <p>{{ t('users') }}</p>
</div>

These usages are title, intro and admin.users.

In TS and JS files, these names count as translate calls: translate, translocoService.translate, transloco.translate, translocoService.selectTranslate and transloco.selectTranslate.

Placeholders

Double braces: {{name}}.

Extraction templates