How to use translations with variables in Angular with ngx-translate

To your assets/i18n/en.json: 

  "loggedin_welcome_title": "<strong>Welcome</strong> {{username}}, to your kiosk."

 To your assets/i18n/nl.json: 

  "loggedin_welcome_title": "<strong>Welkom</strong> {{username}}, bij jouw kiosk."

Then in your page.html.twig you can use: 

<h1 class="mt-0" [innerHTML]="'loggedin_welcome_title'|translate:{'username': currentUser.name }"></h1>

Another example is:

  "show_x_results": "Show {{number}} results"

And then have the following in your templates: 

<strong>{{ 'show_x_results'|translate: {'number': totalResultsControl.value} }}</strong>

To make this work, make sure you have your ngx-translate pipe working!