I'm using ngx-translate for internationalization on Ionic 3
app. I have used pipe
nicely on HTML
code. But now I have a situation like below on ts
file. Can you tell me how to handle such dynamic use case with ngx
?
updateApi(topic) {
this.showToast(`Topic ${topic.name} subscribed!`);//this is the dynamic text
}
showToast(message) {
let toast = this.toastCtrl.create({
message: message,
duration: 3000
});
toast.present();
}
The problem here is I don't know the value of ${topic.name}
up front. So how can I give the key/value
for that on i18n
json
file? or am I missing something here?
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} }}