Change Side Menu Direction in Ionic and multi app direction RTL/LTR

Ionic Framework ionic-v3
1

Hello Experts

Given:
-IONIC 3
-Angular 4
-Multi-Lingual application with ng2-translate
-RTL support is enabled based on

  • side menu type: overlay
  • function is used to change language is working fine except in the side menu floating
changeLanguage(languageId) {
    if (languageId === 'ar') {
      this.platform.setDir('rtl', true);
      this.translate.setDefaultLang(languageId);
      
    } else {
      this.platform.setDir('ltr', true);
      this.translate.setDefaultLang(languageId);
    }
  }

Required:

  1. How to change the side menu direction dynamically?
  2. At the opening tag of ion-menu in app.component.ts, Why didn’t the following code run?
    <ion-menu [side]="(this.platform.dir() == rtl) ? right : left" [content]="content" type="overlay">

I would appreciate any help.

Regards
Mahmoud

2 Likes
2

To understand your question. You want to change this sidemenu to appear on both sides so you get one menu on the left and one menu on the right with different buttons to click ? :hamster:

3

Thanks for reply.

No. I have only one menu.

When I choose the ar for Arabic, I just need to make the menu overlays from right to left. In all other languages, it overlays from left to right.

Could I use something like

<ion-menu [side]="getSideOfCurLang()" [content]="mycontent">
...
</ion-menu>

How?
Where?

Regards
Mahmoud

1 Like
4

hi Mahmoud,
have u found a solution for that i have the same problem
regards

5

I still don’t fully understand your question. I think you mean that when u choose “ar” the menu should be on the right and swipe open to the left.

you can use this command todo so.

HTML:

<ion-menu side="right" [content]="yourContent"></ion-menu>

TS:

toggleRightMenu() {
  this.menuCtrl.toggle('right');
}

For more info for the MenuController click here.
I hope it was that what you wanted. :relaxed:

6

Thanks again for your help.

As I said before:
It is multilingual app. So, the side menu has two behaviors not one.
Assume I have a language selector that setDir of the document.
In case of choosing Arabic language, the side menu would swipe or overlays from right to left.
In case of choosing English language, the side menu would swipe or overlays from left to right.

Your code works in case for Arabic case only, if I change the language to English, it stills swipe from right to left.

Regards
Mahmoud

7

Then change the code to ‘left’ :relaxed:.

8

Finally, I found solution by help from a friend. The solution is to create two side menus: one for RTL and the other for LTR. Choosing the menu based on *ngIf directive of the selected dir of the language. Here is the code.

<!--*****************************************-->
<!-- RTL Menu : Overlaying From Right To Left--> 
<ion-menu *ngIf="this.platform.dir()==='rtl'" 
          side="right"
          [content]="content">
   <!-- Side menu header option -->
   <ion-header no-border>
      <ion-toolbar text-center padding-top>
         <ion-title>MENU</ion-title>
      </ion-toolbar>
   </ion-header>
   
   <!-- Side menu content option -->
   <ion-content>
      <ion-list no-lines>
         <ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
            .....
         </ion-item>
      </ion-list>
   </ion-content>
</ion-menu>

<!--*****************************************-->
<!-- LTR Menu : Overlaying From Left To Right-->
<ion-menu *ngIf="this.platform.dir()==='ltr'" 
          side="left"
          [content]="content">
  
  <!-- Side menu header option -->
   <ion-header no-border>
      <ion-toolbar text-center padding-top>
         <ion-title>MENU</ion-title>
      </ion-toolbar>
   </ion-header>
   
   <!-- Side menu content option -->
   <ion-content>
      <ion-list no-lines>
         <ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
             ......
         </ion-item>
      </ion-list>
   </ion-content>
</ion-menu>

I hope it helps someone.

Regards
Mahmoud

6 Likes
9

Thanks MAhmoud,

This was the only solution that helped,…

Changeing the side on a menu on runtime as well as RTL does not work btw is buggy but your solution works

Thanks

10

that great, well done but I think i did something wrong because I get error

Cannot read property ‘dir’ of undefined

can you post the source code ?

1 Like
11

Same Problem any help plz i have more then 10 days and any solution plz
ERROR TypeError: Cannot read property ‘setDir’ of undefined

12

Did you import platform in the app component class and injected it ?
My template source code looks like the one Mahmoud posted above

import { Platform } from ‘ionic-angular’;

@Component({…})
export MyPage {
constructor(public platformt: Platform) {

}
}

13

yes it imported

could you send this source codes

app.module
app.component
app.html

14

hello there i know it is very late but in case someone still having trouble in that

you just need to put these attribute to menu

type=“overlay” [attr.side]=“this.platform.dir()===‘ltr’?‘left’:‘right’”

to become

<ion-menu [content]=“content” type=“overlay” [attr.side]=“this.platform.dir()===‘ltr’?‘left’:‘right’”>

thanks to this video

https://www.youtube.com/watch?v=mNBhMVXyBtY

15
16

I Used Your Solution But I get error
Uncaught TypeError: Cannot read property ‘raf’ of null at animation.js:292