Translate items of the default slide menu in the app.component.ts

Ionic Framework ionic-v3
1

Hello,
I have starting using the default slide menu template and the translate is working fine in my HTML pages.
How can I translate the titles of my different items of my slide menu defined in my app.component.ts:

  constructor(private translate: TranslateService, private config: Config, private platform: Platform, private statusBar: StatusBar, private splashScreen: SplashScreen) {

    this.initTranslate();
    this.initializeApp();    

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage },      
    ];

  }

I tried the translateService.get(’…’).subscribe and this.translate.instant with no success.

Thank you

Sylvain

3

app.component.ts:

  appPages: PageInterface[] = [
 { title: 'PAGE_A_TITLE', component: Page1 },
 { title: 'PAGE_B_TITLE', component: Page2 },
 { title: 'PAGE_C_TITLE', component: Page3 },
 { title: 'PAGE_D_TITLE', component: Page4 }
 ];

en.json:

{
"PAGE_A_TITLE": "This is page one",
"PAGE_B_TITLE": "Title for page two",
"PAGE_C_TITLE": "And one more",
"PAGE_D_TITLE": "Page 4"
}

app.html:

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

u get this working or still have problems?

5

You are the best ! Thank you !

6

This is perfect, just makes it so easy - and at the same time explains the whole ‘TITLE’ thing.

7

@noutcharty
Thanks , you saved me

9

perfectly working…thanks