Slide menu with different content depending on page


#1

So Im making an app that has one set of pages in english and one set in Portuguese. My problem is the slide menu is always the english version.

How do I set it up up so that when the user is on a Portuguese page the slide menu shows the Portuguese menu options?


#2

Then you should take a look at i18n angular-translate or a little module i wrote --> ng-easy-translate

There you can add translations/translation files to provide your app in different languages :slight_smile:

This is nothing like content. more like translations.


#3

This looks interesting, do you have some kind of tutorial of how to implement it, being a newbie its kind of confusing.


#4

I thought this was an interesting problem, and I’m sure there’ll be more efficient ways, but here’s my solution. I’ve just noticed this is tagged as Ionic not Ionic 2… here’s my Ionic 2 solution. :slight_smile:

In app.html, change:
<ion-content> <ion-list> <button ion-item *ngFor="#p of pages" (click)="openPage(p)"> {{p.title}} </button> </ion-list> </ion-content>

to this:
<ion-content> <ion-list *ngIf="usePortugese"> <button ion-item *ngFor="#p of pages" (click)="openPage(p)"> {{p.titlePortugese}} </button> </ion-list> <ion-list *ngIf="!usePortugese"> <button ion-item *ngFor="#p of pages" (click)="openPage(p)"> {{p.title}} </button> </ion-list> </ion-content>

And in app.js, change your menu setup inside the constructor to this:
// set our app's pages this.pages = [ { title: 'Hello Ionic',titlePortugese:"Olá iônica", component: HelloIonicPage }, { title: 'My First List', titlePortugese: 'Minha Primeira Lista', component: ListPage }, { title: 'Switch to Portugese', titlePortugese: 'Este é Português', component: PortugesePage} ]; this.usePortugese = false;

Finally, in app.js, change the openPage function to this:
openPage(page) { if (page.title == "Switch to Portugese") this.usePortugese = true; else this.usePortugese = false; // close the menu when clicking a link from the menu this.menu.close(); // navigate to the new page if it is not the current page let nav = this.app.getComponent('nav'); nav.setRoot(page.component); }


#5

I cant work out how to add that to my app.

Its started with Ionic creator so the format is slightly different.


#6

I haven’t written in Ionic 1, but here’s the principle I used…

  • create a boolean that tracks what language to display
  • add a element to the menu items so they know the Portuguese title
  • when building the menu, as you loop through each menu element, print the appropriate title depending on the language boolean
  • you can rebuild the menu list every time a menu selection is made

Looking through your code, it appears that you can add elements for the english title and the Portuguese titles in the objects created in calcada/www/js/routes.js.

Then set the innerHTML of the menu items inside calcada/www/templates/menu.html (or menuContent.html … I’m not sure for your case).


#7

So I finally worked it out by nesting pages like in this example.

Working git hub project