Remember the selected lanuage

Ionic Framework ionic-v3
1

hi
I wanna to make my app remember the selected language even he closed the app and open it again
html

    <ion-item class="settings-items" no-border ion-item>
      <ion-icon class="img-view" item-start name="ios-globe">
      </ion-icon>
      <ion-label [ngClass]="(this.Platform.isRTL ) ? 'settings-textAr': 'settings-text' ">{{'LANG' | translate:param}}</ion-label>
      <ion-select mode="ios" [(ngModel)]="lang" item-end (ionChange)="switchLanguage()">
        <ion-option class="options" value="en">
          {{'ENG' | translate:param}}
        </ion-option>
        <ion-option class="options" value="ar">
          {{'ARAB' | translate:param}}
        </ion-option>
      </ion-select>
    </ion-item>

ts

  switchLanguage() {

    if (this.lang === 'en') {
      
      this.translate.use(this.lang)
      this.Platform.setDir('ltr', true)
    } else {

      
      this.Platform.setDir('rtl', true)
      this.translate.use(this.lang);


    }
  }
2

I suggest using a storage to save preferences.

1 Like
3

hi @surajrao thanks for reply
i tried but didn’t work

      <ion-select mode="ios" [(ngModel)]="lang" item-end (ionChange)="switchLanguage()">
        <ion-option class="options" value="en" [selected]="lang == en">
          {{'ENG' | translate:param}}
        </ion-option>
        <ion-option class="options" value="ar" [selected]="lang == ar">
          {{'ARAB' | translate:param}}
        </ion-option>
      </ion-select>

this.lang = this.storage.get('lang');

  switchLanguage() {

    if (this.lang === 'en') {
      
      this.translate.use(this.lang)
      this.Platform.setDir('ltr', true)
      this.storage.set('lang' , this.lang)
    } else {
      // console.log(this.lang)
      
      this.Platform.setDir('rtl', true)
      this.translate.use(this.lang);
      this.storage.set('lang' , this.lang)


    }
  }
4

Depends on which storage you are using. Many use promises.