---
title: "angular-i18next"
description: "The preset for angular-i18next. It reads the pipes in Angular templates, injected services under any name, namespace and scope providers, translated titles and validation messages."
canonical_url: "https://x18n.dev/presets/angular-i18next"
---
# angular-i18next

> The preset for angular-i18next. It reads the pipes in Angular templates, injected services under any name, namespace and scope providers, translated titles and validation messages.

The `angular-i18next` preset supports [angular-i18next](https://github.com/Romanchuk/angular-i18next) on top of [`i18next`](https://x18n.dev/presets/i18next), so plurals, namespaces and the init options work the same.

## Detection

The preset applies when the project depends on `angular-i18next`.

```ts [x18n.config.ts]
import { defineConfig } from '@x18n/core'

export default defineConfig({
  presets: ['angular-i18next'],
})
```

## Locale files

- `src/locales/{locale}.{namespaces}.json` and `src/locales/{locale}/{namespaces}.json`
- the same under `src/assets/locales/` and `public/locales/`

## Supported syntax

In templates, in `.html` files and inline, the `i18next`, `i18nextEager` and `i18nextCap` pipes:

```angular-html [src/app/a.html]
<p>{{ 'title' | i18next }}</p>
<p [title]="'hint' | i18nextEager"></p>
<p>{{ 'admin:name' | i18nextCap }}</p>
<p>{{ 'count' | i18next: { count: 2, ns: 'admin', name: user } }}</p>
<p>{{ (on ? 'yes' : 'no') | i18next }}</p>
<p>{{ ['first', 'fallback'] | i18next }}</p>
<p>{{ ('status.' + state) | i18next }}</p>
```

The pipe options give the namespace (`ns`), the default value and the params of the usage. `i18nextFormat` takes a translated text, so it is not a usage. A key built with `+`, or in a template string with `${}`, counts as a prefix, so the keys under `status.` are not unused.

In code, the services and pipes a class injects, whatever their name:

```ts [src/app/app.ts]
class App {
  words = inject(I18NEXT_SERVICE)

  constructor(@Inject(I18NEXT_SERVICE) private lang: ITranslationService, private pipe: I18NextPipe) {
    lang.t('title')
    this.words.exists('hint', { ns: 'admin' })
    pipe.transform('name', {})
    lang.getFixedT(null, 'admin', 'form')('name')
  }
}
```

## Providers

`I18NEXT_NAMESPACE` and `I18NEXT_SCOPE` reach the pipes, as in the library:

```ts
providers: [
  { provide: I18NEXT_NAMESPACE, useValue: 'feature' },
  { provide: I18NEXT_SCOPE, useValue: 'person' },
]
```

Here `'name' | i18next` is `feature:person.name`, and falls back as the library does: to `feature:name`, then to the key as written. A key with its own namespace, or a pipe with `prependNamespace: false` and `prependScope: false`, is left as written.

A provider reaches what it reaches in Angular:

- The provider of a component reaches its own part of the file and its `templateUrl`, the components its template uses, by element or attribute selector, and what its `<router-outlet>` shows, down the tree. The nearest provider wins.
- The provider of a module reaches the components the file names, and a route's reaches the components named or lazy-loaded under it, through `loadChildren` too, and their children.
- Providers in a file that names no component, such as a shared list, reach the folder of that file and the folders under it.

With `useValue: ['a', 'b']`, each value is tried in order. A component used under two parents with different providers has one key in x18n, from the nearest one found first. A provider with `useFactory`, or a `useValue` that isn't a literal, can't be read.

## Titles and validation messages

With `{ provide: Title, useClass: I18NextTitle }` in the project, `title.setTitle('home')` is a usage, under any name for `Title`.

`<i18next-validation-message>` builds its keys at runtime, so when the project uses it the keys in the `validation` namespace are not unused, nor those of `i18nextNamespace`.

## Hard strings in templates

The preset adds the `html` scanner, which finds text and text attributes as described for [ngx-translate](https://x18n.dev/presets/ngx-translate).

| Kind                       | Template                               | Import |
| -------------------------- | -------------------------------------- | ------ |
| `html-text`                | `{{ '{key}' \| i18next }}`             |        |
| `html-attribute`           | `[{attr}]="'{key}' \| i18next"`        |        |
| `js-string`, `js-template` | `this.i18NextService.t('{key}'{args})` |        |

## Placeholders

Those of i18next: `{{name}}` and `$t(key)`.


## Sitemap

See the full [sitemap](https://x18n.dev/sitemap.md) for all pages.