Ionic 4 : Changez la langue de l'application d'avant en arrière avec un bouton

Question

J'ai besoin de créer un bouton qui changera la langue de mon application Ionic/Angular. J'ai actuellement deux boutons, un qui traduit l'application en anglais, et un second qui traduit l'application en français. J'aimerais que l'on ait l'impression qu'il n'y a qu'un seul bouton qui peut traduire en français et en anglais, mais je ne sais pas comment faire.

Voici ce que j'ai jusqu'à présent :

html:
<ion-button color="primary" slot="end" (click)="useLanguage('en')">{{ 'EN-BTN' | 
translate }}</ion-button>

<ion-button color="primary" slot="end" (click)="useLanguage('fr')">{{ 'FR-BTN' | 
translate }}</ion-button>

ts:
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language-btn',
  templateUrl: './language-btn.component.html',
  styleUrls: ['./language-btn.component.scss'],
})
export class LanguageBtnComponent implements OnInit {

  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en'); }

    useLanguage(language: string) {
      this.translate.use(language);
    }
  ngOnInit() {}
}

Answer 1

Une solution simple est de faire basculer un booléen lorsque le bouton est cliqué, si vous voulez que l'anglais soit la valeur par défaut nous pouvons utiliser par exemple isEn = true initialement...

isEn = true;

useLanguage() {
  this.isEn = !this.isEn;
  isEn ? this.translate.use('en') : this.translate.use('fr');
} 

Pour le bouton, vous pouvez utiliser :

<ion-button color="primary" slot="end" (click)="useLanguage()">
  <span *ngIf="isEn">{{ 'EN-BTN' | translate }}</span>
  <span *ngIf="!isEn">{{ 'FR-BTN' | translate }}</span>
</ion-button>