Use structural directive in views

Using a structural directive is the recommended way as it creates one subscription per template.

You can use the translate structural directive to get your translated texts:

<ng-container *translate="let t">
  <p>{{ t( key, parameters ) }}</p>
</ng-container>

The parameters are optional. For example:

<ng-container *translate="let t">
  <form>
    <label>{{ t( 'form.product.label' ) }}</label>
    <input type="text" name="product" placeholder="{{ t( 'form.product.hint' ) }}">
  </form>
</ng-container>

Or with parameter:

<ng-container *translate="let t">
  <p>{{ t( 'app.home.welcome', { name: 'John' } ) }}</p>
</ng-container>

You can also specify paramaters in the component:

const profile = {
  name: 'John',
  age: 37
};

<ng-container *translate="let t">
  <p>{{ t( 'app.home.welcome', profile ) }}</p>
</ng-container>

If the keys of the texts in the view mostly starts with the same path, they can be shortened providing the beginning of the keys in the node property. Exceptiona are marked with a starting slash ('/') character:

<ng-container *translate="let t; node: 'app.form'">
  <form>
    <label>{{ t( 'product.label' ) }}</label>
    <input type="text" name="product" placeholder="{{ t( 'product.hint' ) }}">
    <label>{{ t( 'price.label' ) }}</label>
    <input type="text" name="price" placeholder="{{ t( 'price.hint' ) }}">
    <button type="submit">{{ t( '/app.shared.button.submit' ) }}</button>
  </form>
</ng-container>

When you use HTML tags in the translation text:

// app.en.json
{
  "version": "Application Name<br>Version 1.0.0"
}

It can be displayed using the innerHTML attribute:

<ng-container *translate="let t">
  <p [innerHTML]="t( 'app.version' )"></p>
</ng-container>