Active locale:
Usage in templates
Read a translation with the wrT pipe, the [wrT] directive or the WrI18n service.
Locale switcher
Switch the locale to see the demos below update.
Pipe
<h1>{{ 'app.title' | wrT }}</h1>
<p>{{ 'app.hello' | wrT: { name: user().name } }}</p>
<button>{{ 'common.save' | wrT }}</button>Directive
Replaces the element's text with the translation.
<h1 [wrT]="'app.title'"></h1>
<p [wrT]="'app.hello'" [wrTParams]="{ name: user().name }"></p>Service
t() returns a string, translate() a signal.
const i18n = inject(WrI18n);
i18n.use('ru');
i18n.t('app.hello', { name: 'Ada' }); // 'Привет, Ada!'
const title = i18n.translate('app.title'); // Signal<string>use() switches text only. Dates and numbers follow Angular's LOCALE_ID, which needs a reload.
See also
Guide InterpolationFill placeholders in a translation with values.Service WrI18nTranslate strings at runtime and switch the locale without a reload.Guide Setup & loadersProvide WrI18n and load your catalogs.Guide ScopesLoad a feature's catalog only when the feature loads.Pipe wrPluralPick the right word form for a count, in any language.