Problems with ngx translation in ts

Ionic Native
1

Hello,

I have 2 differents problems when i have to use the translation module in my ts files :

First one :

This work fine :

lockAlert() {
      this.translate.get(['PROMPT.LOCK_ALERT.TITLE']).subscribe(res => {
        this.lockAlertTranslatePrompt_1 = res;
      });
      this.translate.get('PROMPT.LOCK_ALERT.SUBTITLE').subscribe(res => {
        this.lockAlertTranslatePrompt_2 = res;
      });
      this.translate.get('PROMPT.LOCK_ALERT.BUTTON').subscribe(res => {
        this.lockAlertTranslatePrompt_3 = res;
      });
     
      let alert = this.alertCtrl.create({
        title: this.lockAlertTranslatePrompt_1,
        subTitle: this.lockAlertTranslatePrompt_2,
        buttons: [this.lockAlertTranslatePrompt_3]
      });
  
      alert.present();
    }

But with “better” code :

I don’t know how to read a json array…

 lockAlert() {
      this.translate.get(['TEST','PROMPT.LOCK_ALERT.SUBTITLE','PROMPT.LOCK_ALERT.BUTTON']).subscribe(
        res => {    
      let alert = this.alertCtrl.create({
        title: res.TEST,
        subTitle: res.PROMPT.LOCK_ALERT.SUBTITLE,
        buttons: ['test']
      });
  
      alert.present();

    });
    }

I can get TEST, but i don’t know how access to my JSON array. : res.PROMPT.LOCK_ALERT.SUBTITLE get me an error.

The json file :

"TEST": "testeee",
"PROMPT":{
	"LOCK_ALERT" : {
			"TITLE": "Commande impossible",
			"SUBTITLE": "Déverrouiller au préalable la porte pour la commander",
			"BUTTON": "Ok"
		},
	"CONNECTION" : {
			"TITLE": "Connection"
		}
	}

}

Second problem :

With a confirm alert, so an alert with buttons… My strings are not translated, i have no idea why.
This alert is launched directly on the first page, and at this time strings are not translated. But if i go on an other page and go back on this one, my strings are translated…
I detect the langage in app.component.ts constructor and put translate.setDefaultLang and translate.reloadLang in this constructor according to the langage detected…

It’s like it’s no charged at the beginning, but i thought that the properties are updated when we get the observable :confused:

here the code :

presentConfirmPerms(havePerms) {

  let trans: any = {};

    this.translate.get(['TEST']).subscribe(
     res => {
      let alert = this.alertCtrl.create({
        title: res.TEST,
        message: res.TEST,
        buttons: [
          {
            text: res.TEST,
            role: res.TEST,
            handler: () => {
              console.log('clicked Cancel');
            }
          },
          {
            text: res.TEST,
            handler: () => {
              console.log('clicked go for android Perms'),
              this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.ACCESS_COARSE_LOCATION,this.androidPermissions.PERMISSION.ACCESS_FINE_LOCATION, this.androidPermissions.PERMISSION.ACCESS_LOCATION_EXTRA_COMMANDS])
            }
          }
        ]
      });
      alert.present();
    });

Thanks in advance for you answers.

2

Is it actually possible to pass multiple values or, to be more specifique, an Array with this.translate.get() ?

 lockAlert() {
      let alert = this.alertCtrl.create({
        title: this.translate.get(['PROMPT.LOCK_ALERT.TITLE']),
        subTitle: this.translate.get('PROMPT.LOCK_ALERT.SUBTITLE'),
        buttons: [this.translate.get('PROMPT.LOCK_ALERT.BUTTON')]
      });
  
      alert.present();


    }

Wouldn’t that be the easiest solution, if working?

EDIT: My bad, didn’t know it’s an observable… it doesn’t work like this sadly.

3

Hm, i think we have to subscribe to an observable.

4

And sadly I’m facing exact the same error as you do, so if you found a Solution please tell me :slight_smile:
I’m also searching for one…

5 
 let something: string = this.translate.instant('YOUR_KEY');
1 Like
6

Is there not any risks to use this instead of an async function ?
I would idealy keep the code like it is write, but want to know how to access to a json array…

For my second problem, i figure it out :
I have to define the root page after platform.ready().then, so all plugins are loaded, and the langage selection things too.

7

Yes and now, depends where you use it. But agree with you, even if .instant is quite performant.

8

Ok, finally got it :

I’m still a little confused with object/array, i used to write C for uC (and it still my job excepted this app…)
I just send it to the consol log and it saw me how write it :confused:

Write :
res[“PROMPT.LOCK_ALERT.SUBTITLE”]
instead of res.PROMPT.LOCK_ALERT.SUBTITLE

 lockAlert() {
      this.translate.get(['TEST','PROMPT.LOCK_ALERT.SUBTITLE','PROMPT.LOCK_ALERT.BUTTON']).subscribe(
        res => {    
      let alert = this.alertCtrl.create({
        title: res.TEST,
        subTitle: res["PROMPT.LOCK_ALERT.SUBTITLE"],
        buttons: ['test']
      });
  
      alert.present();

    });
    }
1 Like
9

Hi,
I was facing the same problem. and this is how i solve it. this is my ts file alert method

 async presentAlert() {
    const alert = await this.alertController.create({
      header: this.translate.instant('Alert'),
      subHeader: this.translate.instant('empty_fields'),
      message: this.translate.instant('enter_fields'),
      buttons: [this.translate.instant('ok')]
    });

    await alert.present();
  }

and this is my JSON File

{
"Alert": "Alert",
    "empty_fields": "Empty Fields",
    "enter_fields": "Enter Required Fields!!",
    "ok": "OK",
}
10

this is for ionic 4 and angular 7