i18n Translate.instant with parameters

12,742

For using the instant method, you have to be sure that your translations have been loaded and it is safe to use it, if not it will fail. That may be the point.

The explanation is simple, you have three ways of loading the translation:

  • You are sure that your translation files are already loaded and don't need updates: translate.instant('key')

  • You are not sure about the loading and don't need updates (returns an Observable to subscribe): translate.get('key')

  • You want updates when user is changing the language:
    translate.stream('key')

I think that you might use the get option, as is the one with less known bugs:

let userName = 'Nick'     
translateService.get('MY_STRING', { user: this.userName }).subscribe((text:string) => {console.log(text});
Share:
12,742
Usr
Author by

Usr

Updated on July 19, 2022

Comments

  • Usr
    Usr almost 2 years

    I need to use TranslateService.instant from ngx-core and pass parameters to do string interpolation.
    So far I've done:

    MY_STRING: "Welcome {{user}}"
    

    In my component I do:

    translateService.instant(MY_STRING, {user: 'Nick'})
    

    and what I get from this is:

    Welcome {{user}}
    

    The parameter user is not interpolated. What am I doing wrong?

  • Usr
    Usr over 4 years
    Hi, thank you, that way it works. The only doubt I have, I am sure that the translation file is already loaded because I trigger the operation manually with a button, and all the other translations in the page area already loaded. Why is that so?
  • ZetaPR
    ZetaPR over 4 years
    I am just wondering, maybe it has something to with the key. I always set my keys with double quotes "MY_STRING". Then translateService.instant('MY_STRING', {user: 'Nick'})