Using ngx-translate in app.component.ts


#1

Hello,
this is probably a very newbie question, which is OK, since I am an Ionic newbie and a one to web development as well on top of that…

So, I am trying to use ngx-translate in my app. I’ve been following this guide:

And it works well in all my pages. However, I also need to localize the side menu for which I need to use TranslateService also in app.component.ts, because that’s where my sidemenu is described like this (in the constructor of the MyApp class in app.component.ts):

let a = { home : "", settings : "" };

this.translate.get('Home').subscribe(t => {
  a.home = t;
});
this.translate.get('Settings').subscribe(t => {
  a.settings = t;
});
// used for an example of ngFor and navigation
this.pages = [
  { title: a.home, component: HomePage },
  { title: a.settings, component: SettingsPage }    
];

Well, the problem is that here I always get only the key value. I guess that it has something to do with the constructor call order. I.e. that the translate service may not yet be set up… But as I said, I am new to Ionic and don’t quite understand how it put’s those classes together to form the resulting app.

So, what should I do, to be able to translate my side-menu?

Thanks!


#2

This works for me:

interface ItemInterface {
  name: string;
  description: string;
  component: string;
  icon: string;
}
...

import { TranslateService } from '@ngx-translate/core';

  ...

  public items: Array<ItemInterface>;

  ...

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              private translate: TranslateService,
              private logger: LoggerService) {

  }

  ...

  public ngOnInit() {

    this.items = [
      { name: 'VERIFIED_VENUE_NAME',
        description: 'VERIFIED_VENUE_DESCRIPTION',
        component: 'VerifiedVenuesPage',
        icon: 'fa-fas-check'
      },

       ...

    ];

    this.translate.get('VERIFIED_VENUE_NAME').subscribe( value => {
      this.items[0].name = value;
      }
    );

    this.translate.get('VERIFIED_VENUE_DESCRIPTION').subscribe( value => {
        this.items[0].description = value;
      }
    );
  }

en.json:

  "VERIFIED_VENUE_NAME": "Verified Venues",
  "VERIFIED_VENUE_DESCRIPTION": "Craft beer venues near you"

See: https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate


#3

Well OK, I have moved the stuff to ngOnInit() but that doesn’t seem to help. translate.get() always returns the value of the key as if the translation was not there at all…

Again, it works fine from all of the pages, but I just cannot do this from app.component.ts.


#4

OK, I probably get it. It is a combination of 2 things which made it rather difficult to track…

  • I had to set translate.setDefaultLang(‘en’); in the constuctor because this one is called before the place I initially had it…
  • For some reason the asynchronous approach doesn’t work here. This:
    this.pages = [
      { title: a.home, component: HomePage },
      { title: a.settings, component: SettingsPage }
    ];

doesn’t really work. When get() returns somewhat later it is not propagated to the menu probably because it is generated from HTML template like this:

<ion-list>
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
         {{p.title}}
    </button>
</ion-list>

So it does not know it should wait… However, I am not sure how to solve this. I guess I cannot use this HTML template at all and should do it somewhere from the ts code when the I have all the values returned, right?


#5

It was as simple as translating the title in HTML and not in typescript:


<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
      {{ p.title | translate }}
</button>