Service

Usage in templates

Three ways to read a translation — | wrT pipe, [wrT] directive, or inject(WrI18n) for code. All three react to locale changes automatically.

Locale switcher

Flip the active locale to watch every demo below re-render.

Active locale:

Pipe

| wrT — impure, re-evaluates on every CD cycle so locale + catalog changes propagate.

<h1>{{ 'app.title' | wrT }}</h1>
<p>{{ 'app.hello' | wrT: { name: user().name } }}</p>
<button>{{ 'common.save' | wrT }}</button>

Save

Cancel

Directive

[wrT] writes textContent of the host. Tidier when the entire element is a translation.

<h1 [wrT]="'app.title'"></h1>
<p [wrT]="'app.hello'" [wrTParams]="{ name: user().name }"></p>

Save

Service

inject(WrI18n)t() for eager string lookup, translate() for reactive signal lookup.

const i18n = inject(WrI18n);
i18n.use('ru');                                 // switch locale
i18n.t('app.hello', { name: 'Ada' });           // → 'Привет, Ada!'

// Reactive lookup — re-runs on locale change:
const title = i18n.translate('app.title');
effect(() => console.log(title()));