# 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.

Source: https://ngwr.dev/guides/translations/usage  
Kind: Service

## Locale switcher

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

## Pipe

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

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

## Directive

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

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

## Service

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

```typescript
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()));
```