Using translate params

Translate params feature gives you ability to use custom context parameters while interpolating. This approach allows usage of angular filters, as well as custom logic, inside your translated messages without unnecessary impact on translations. Let's take a look at simple example:

<span translate translate-params-date="ctrl.modificationDate | date : 'yyyy-MM-dd HH:mm'">
    Last modified: {{date}} by {{}}.

When you extract such a string you will get:

Last modified: {{date}} by {{}}.

You can think of it as an alias for any expression you want to extract. This is both easy to understand for translator and it doesn't depend on implementation detail (like date format).

Interpolation context

Notice that in previous example we parameterized modificationDate variable but we've left as it was. This is possible because every translate param extends current scope for interpolation rather then replace it. Finally it's all up to you to decide if you want to extract all the expressions, only some of them or nothing at all.

<span translate
      translate-params-date="ctrl.modificationDate | date : 'yyyy-MM-dd HH:mm'"
    Last modified: {{date}} by {{author}}.

Multiple parameters

You can use as many translation params as you need with single string. Parameter declaration follows angulars convention so each param is declared as translate-params-* where you can replace * with any snake-case variable name. Each parameter will then be available in your string under the same name written in camelCase.

<span translate
      translate-params-date="ctrl.currentDate | date : 'yyyy-MM-dd'"
      translate-params-amount-usd="ctrl.amountUsd | currency : 'USD'"
      translate-params-amount-eur="ctrl.amountEur | currency : 'EUR'">
    Today's ({{date}} rate: {{amountUsd}} = {{amountEur}}.


<span translate translate-params-modification-date="ctrl.modificationDate | date : 'yyyy-MM-dd'">
    Last modified: {{modificationDate}}.
<span translate
      translate-params-date="ctrl.modificationDate | date : 'yyyy-MM-dd'"
    Last modified: {{date}} by {{modifier}}.

Here's one of previous examples without translate-params:

<span translate>Today's</span>
<span> ({{ctrl.currentDate | date : 'yyyy-MM-dd'}}) </span>
<span translate>rate</span>
<span>: {{ctrl.amountUsd | currency : 'USD'}} = {{ctrl.amountEur | currency : 'EUR'}}</span>

As a result you receive two strings to translate: Today's and rate. With translate-params you would have received full sentence e.g. Today's ({{date}} rate: {{amountUsd}} = {{amountEur}}.