Interpolation

Fill placeholders in a translation with values.

Catalog shape

Wrap the param name in double braces; a param missing from the object renders as nothing.

{
  "app": {
    "title": "Welcome",
    "hello": "Hello, {{name}}!",
    "items": "{{count}} item(s) selected"
  }
}

Live

Type a name.

Hello, Ada!

Locale: en

<p>{{ 'app.hello' | wrT: { name: user().name } }}</p>
<p>{{ 'app.items' | wrT: { count: selection().length } }}</p>

Reusable formatter

useI18nFormatter(key, fallback) returns a function of the params, for a label reused per row.

import { useI18nFormatter } from 'ngwr/i18n';

const formatItems = useI18nFormatter('app.items', '{{count}} item(s) selected');

formatItems({ count: 3 }); // '3 item(s) selected'

See also