Ionic 4 Multi language

Ionic Framework
1

I tried to make side menu application with Arabic and English languages. But if changes the direction rtl the menu shows left side only, pls help to solve this issue…Thank you

2

Hey, I also faced this issue months back…

I Did like following,

In menu.html add [side]=“openMenuFromRight”
just like this -
<ion-menu [content]=“content” [side]=“openMenuFromRight” type=“overlay”>

and in menu.ts
below export class
(i declared this)
public openMenuFromRight;

and called this in constructor :–

if (localStorage.getItem(“langCode”) == “ar”) {
this.openMenuFromRight = “right”
}
else {
this.openMenuFromRight = “left”
}

Hope it helps! :slight_smile: Its working for me… Do let me know your feedback…

Thanks!

1 Like
3

Thanks for your reply…

I wrote like this , that’s works for me , but really I don’t know this logic is correct or not…

      <ion-menu-toggle auto-hide="false">
        <ion-item class="category" detail="false" [routerDirection]="'root'" routerLink="/menu">
          <ion-icon slot="end" name="home"></ion-icon>
          <ion-label slot="start">
            <img src="../../assets/images/logoxadok.png">                
          </ion-label>
        </ion-item>
      </ion-menu-toggle>

      <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
        <ion-item detail="false" [routerDirection]="'root'" [routerLink]="[p.url]" routerLinkActive="active">
          <ion-icon slot="start" [name]="p.icon"></ion-icon>
          <ion-label>
            {{p.title | translate}} 
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>


<ion-menu menuId="arabichMenu" 
contentId="mainContent" 
type="overlay" 
side="start" *ngIf="this.platform.isRTL">

  <ion-content>


    <ion-list lines="none">

      <ion-menu-toggle auto-hide="false">
        <ion-item class="category" detail="false" [routerDirection]="'root'" routerLink="/menu">
          <ion-icon slot="end" name="home"></ion-icon>
          <ion-label slot="start">
            <img src="../../assets/images/logoxadok.png">
            Arabic
          </ion-label>
        </ion-item>
      </ion-menu-toggle>

      <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
        <ion-item detail="false" [routerDirection]="'root'" [routerLink]="[p.url]" routerLinkActive="active">
          <ion-icon slot="start" [name]="p.icon"></ion-icon>
          <ion-label text-right>
            {{p.title | translate}}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-router-outlet id="mainContent"></ion-router-outlet>