In my setting page, the user can select language. When language changed, the text in setting page should be changed accordingly. It works fine for <ion-label>, but <ion-select> is not changed until user clicks it.
How can I make the content of <ion-select> change once language is changed?
<ion-list>
<ion-item>
<!-- this works well -->
<ion-label>{{ "pages.settings.items.language" | translate }}</ion-label>
<ion-select [(ngModel)]="lang" (ionChange)="updateLang()">
<ion-option value="zh">中文</ion-option>
<ion-option value="en">English</ion-option>
<ion-option value="fr">Français</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>{{ "pages.settings.items.firstDayOfWeek" | translate }}</ion-label>
<ion-select [(ngModel)]="firstDay" (ionChange)="updateFirstDay()">
<ion-option value="0">
<!-- this doesn't work -->
{{ "pages.settings.items.sunday" | translate }}
</ion-option>
<ion-option value="1">
<!-- this doesn't work -->
{{ "pages.settings.items.monday" | translate }}
</ion-option>
</ion-select>
</ion-item>
<ion-item (click)="openBackup()">
<!-- this works well -->
<ion-label>{{ "pages.settings.items.backupsAndRestore" | translate }}</ion-label>
</ion-item>
</ion-list>
updateLang() {
if (this.lang !== this.config.lang) {
this.translate.use(this.lang);
}
}