Search code examples
javascriptangulartranslationionic2ng2-translate

Ionic 2 : Use ng2-translate in a ts file


I want to use a translation in an object to use the toast on Ionic 2. But I don't understand how to use ng2-translate in a .ts file... Somenone can show me an example ?

I want to have a translation in a title in my menu. I try like this but it doesn't work :

constructor(public platform: Platform, public menu: MenuController, public translate : TranslateService) {
this.initializeApp();

translate.setDefaultLang('fr');
translate.use('fr');
let testTrad : string = 'Accueil';

translate.get('TEST').subscribe(res => {testTrad = res; console.log(testTrad)});
console.log(testTrad);

// Remplissage du tableau des pages.
this.pages= [
  {title: testTrad ,                  component: TabsPage},
  {title: 'Mon compte',               component: MyAccountPage},
  {title: 'Changer de mot de passe' , component: ChangePasswordPage},
  {title: 'Documents' ,               component: DocumentsPage}
]

It must be display "test" on my menu, but it continue to display "Accueil".


Solution

  • No that's correct,

    translate.get('TEST').subscribe(res => {testTrad = res; console.log(testTrad)});
    console.log(testTrad);
    
    // Remplissage du tableau des pages.
    this.pages= [
      {title: testTrad ,                  component: TabsPage},
      {title: 'Mon compte',               component: MyAccountPage},
      {title: 'Changer de mot de passe' , component: ChangePasswordPage},
      {title: 'Documents' ,               component: DocumentsPage}
    ]
    

    .subscribe is async, so the values assigned within the subscribe, are not yet accessible

    Try

    translate.get('TEST').subscribe(res => {
        testTrad = res; 
        console.log(testTrad);
        this.pages= [
           {title: testTrad ,                  component: TabsPage},
           {title: 'Mon compte',               component: MyAccountPage},
           {title: 'Changer de mot de passe' , component: ChangePasswordPage},
           {title: 'Documents' ,               component: DocumentsPage}
        ]
    });
    console.log(testTrad);
    

    Or, if you don't want to wait for the async the finish you could try

    this.pages= [
      {title: 'Mon compte',               component: MyAccountPage},
      {title: 'Changer de mot de passe' , component: ChangePasswordPage},
      {title: 'Documents' ,               component: DocumentsPage}
    ]
    translate.get('TEST').subscribe(res => {
       testTrad = res;
       this.pages.push({title: testTrad, component: TabsPage});
     });