ngx-translate

The preset for ngx-translate. It reads the translate pipe and directive in Angular templates, and TranslateService calls.

The ngx-translate preset supports ngx-translate in Angular projects.

Detection

The preset applies when the project depends on @ngx-translate/core.

x18n.config.ts

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

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

Locale files

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

Supported syntax

In HTML templates, the preset reads the translate pipe and the translate directive:

src/app/app.component.html

<h1>{{ 'home.title' | translate }}</h1>
<p [translate]="'home.sub'"></p>
<p translate="home.intro"></p>
<span translate>home.footer</span>

In TS and JS files, these names count as translate calls: translate.instant, translate.get, translate.stream, translateService.instant, translateService.get, translateService.stream and _. A call on this counts too:

src/app/app.component.ts

this.translate.instant('home.save')

Placeholders

Double braces: {{name}}.

Extraction templates

Kinds	Template
`html-text`	`{{ '{key}' \| translate }}`
`js-string`, `js-template`	`this.translate.instant('{key}'{args})`

next-international

The preset for next-international. It reads useI18n, useScopedI18n and their server versions, and TS locale files.

transloco

The preset for Transloco. It reads the transloco pipe, directive and structural directive with read scopes, and the translate function.