ngx-translate with dynamic text on ts file

You have to inject the Translate Service in your component :

constructor(private translate: TranslateService) {}

And declare in your translation file something like this :

{
  "TOPIC": "Topic {{value}} subscribed!"
}

Then you can choose one of the following way :

Translate instantly :

showToast(this.translate.instant('TOPIC', {value: topic.name}));

Translate with an observable

this.translate.get('TOPIC', {value: topic.name}).subscribe(res => {
      showToast(res);
});

Translate directly in the template

{{ 'TOPIC' | translate: {value: topic.name} }}

You also can do it by this way:

this.showToast(this.translate.instant('TOPIC', {value: ${topic.name}}));

Related