Ionic 2 : Use ng2-translate in a ts file

Question

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".

Ivar Reukers · Accepted Answer · 2016-12-01T12:58:36.987

2

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});
 });

edited Dec 01 '16 at 12:58

answered Nov 30 '16 at 10:08

Ivar Reukers

7,560
9
56
99

It work but I have another problem ... I can' use the traduction because I receive an async response. I want to insert my trad in a variable and use it directly. I don't know if you see what I mean ? – V. Pivet Dec 01 '16 at 08:50
No I'm not sure what you mean. Are you talking about the `translate.get().subscribe()`? – Ivar Reukers Dec 01 '16 at 08:54
Yes. This do an asynchrone request. " let testTrad : string; translate.get('TEST').subscribe(res => {testTrad = res;}); console.log(testTrad); " In this part of code my console.log doesn't display anything because I receive my "res" to late. – V. Pivet Dec 01 '16 at 11:24
Ok for `async` methods, you cannot use the variable outside of it. What you can do is create a seperate function `setVariable` where you can do anything you like with your returned response. I don't understand what your issue is and what you're trying to create so can't provide you with code – Ivar Reukers Dec 01 '16 at 11:26
I have update my question to show you what I want to do. :) – V. Pivet Dec 01 '16 at 12:50
But just saying, you should've made it into another question, just because someone else could have made the same issue you had before and now he wouln't be able to find it anymore :) – Ivar Reukers Dec 01 '16 at 13:01

Ionic 2 : Use ng2-translate in a ts file

1 Answers1