Search code examples
angularinternationalizationangular-i18n

How to use anguluar i18n in html template with variables?

Is it possible to use variables in an angular template i18n string?

In TypeScript I can use template string, eg:

public welcomeMessage = $localize`:@@test.welcome: Hello ${this.name}:user_name:! How's your day?`;

Can I use something similar in html templates? eg

<p i18n="@@test.welcome">Hello {{name}}:user_name:! How's your day?</p>

Hope you get my point.

Solution

  • I've ran into the same issue and the Angular i18n documentation is somewhat unclear about interpolation and naming the interpolated placeholder. For simple text interpolation you can just use:

    <p i18n>Hello {{name}}! How's your day?</p>

    But AFAIK there is currently no way of naming the interpolated placeholder, it will just end up being the interpolated text:

    <source>Hello <x id="INTERPOLATION" equiv-text="{{name}}"/>! How&apos;s your day?</source>

    However, you could always change the placeholder (equiv-text) manually in the extracted XLIFF file.