SimpleQR/src/app/pages/setting-language/setting-language.page.html

<ion-header>
  <ion-toolbar [color]="env.colorTheme === 'black'? 'black' : 'dark'">
    <ion-buttons slot="start">
      <ion-back-button text="">
      </ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'LANGUAGE' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-radio-group [(ngModel)]="env.selectedLanguage" (ionChange)="saveLanguage()">
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-label class="ion-padding-start">
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            {{ 'SYSTEM_DEFAULT' | translate }}
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'default'"
        [color]="'primary'">
      </ion-radio>
    </ion-item>
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-label class="ion-padding-start">
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            Deutsch (de)
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'de'"
        [color]="'primary'">
      </ion-radio>
    </ion-item>
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-label class="ion-padding-start">
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            English (en)
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'en'"
        [color]="'primary'">
      </ion-radio>
    </ion-item>
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-label class="ion-padding-start">
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            Français (fr)
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'fr'"
        [color]="'primary'">
      </ion-radio>
    </ion-item>
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-label class="ion-padding-start">
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            Italiano (it)
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'it'"
        [color]="'primary'">
      </ion-radio>
    </ion-item>
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-label class="ion-padding-start">
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            正體中文 (zh)
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'zh-HK'"
        [color]="'primary'">
      </ion-radio>
    </ion-item>
    <ion-item class="ion-no-padding ripple-parent" detail="false" lines="none">
      <ion-label class="ion-padding-start">
        <p class="ion-padding pre-line">
          <ion-text [color]="env.colorTheme === 'light'? 'dark' : 'light'" style="font-size: large;">
            简体中文 (zh-CN)
          </ion-text>
        </p>
      </ion-label>
      <ion-radio class="ion-margin-end" slot="end" [value]="'zh-CN'"
        [color]="'primary'">
      </ion-radio>
    </ion-item>
  </ion-radio-group>

</ion-content>