How to use parameters in ngx-translate

Create an entry in the translation file (assets/i18n/en.json). The string interpolation syntax {{ }} is used to indicate a named parameter.

{
  "TEXT": "Hello {{value1}} and {{value2}}"
}

You can pass parameters to the translation using four techniques:

Method 1: In the template, using the translate pipe

{{ "TEXT" | translate: { value1: paramValue1, value2: paramValue2 } }}

Method 2: In the template, using the translate directive, with the key as an attribute

<p
  [translate]="'TEXT'"
  [translateParams]="{ value1: paramValue1, value2: paramValue2 }"
></p>

Method 3: In the template, using the translate directive, with the key as the element content

<p
  translate
  [translateParams]="{ value1: paramValue1, value2: paramValue2 }"
>
  TEXT
</p>

Method 4: In the code, using the instant API

First translate the key in code:

this.stringInCode = this.translate.instant('TEXT', {
  value1: this.paramValue1,
  value2: this.paramValue2,
});

Then use the variable using string interpolation in your template:

<p>
  {{ stringInCode }}
</p>