I can’t paste the whole code, but basically i had this object in my component
settings = {
language: 'en'
}
and in my template, i had
<ion-select
[(ngModel)]="settings.language"
(ionChange)="settingsChanged($event, 'language')"
interface="popover">
<ion-option value="en">English</ion-option>
<ion-option value="ko">한국어</ion-option>
</ion-select>
those are the old ways without using ngrx/store.
I can’t post my whole code here, but i’m trying to achieve the same thing but using ngrx/store.
below is the reducer.
import { Settings } from '../_models/settings.model';
interface Action {
type: string,
payload: any
}
export const initialSettings: Settings = {
language: 'en',
theme: 'light'
}
export const settingsReducer = (state: Settings = initialSettings, action: Action) => {
let newState;
switch(action.type) {
case 'GET_SETTINGS':
newState = Object.assign({}, state);
return newState;
case 'UPDATE_SETTINGS':
newState = Object.assign({}, state, action.payload);
return newState;
default:
return state;
}
}
and in my component i have the code like this
import { Component, ViewChild } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { Slides } from 'ionic-angular';
import {
IonicPage,
NavController,
NavParams,
ModalController
} from 'ionic-angular';
import { DownloadPage } from '../download/download';
import { Settings } from '../../_models/settings.model';
interface AppState {
settings: Settings
}
interface Theme {
name: string,
label: string
}
@IonicPage()
@Component({
selector: 'page-options',
templateUrl: 'options.html',
})
export class OptionsPage {
@ViewChild(Slides) slides: Slides;
settings: Observable<Settings>;
themes: Theme[] = [
{ name: 'light', label: 'THEME_LIGHT' },
{ name: 'dark', label: 'THEME_DARK' },
{ name: 'rose', label: 'THEME_ROSE' }
]
constructor(
public navCtrl: NavController,
public modalCtrl: ModalController,
public navParams: NavParams,
private store: Store<AppState>
) {
this.settings = this.store.select('settings');
}
ionViewDidLoad() {
console.log('ionViewDidLoad OptionsPage');
}
openDownload() {
let modal = this.modalCtrl.create(DownloadPage);
modal.present();
}
themeChanged() {
let currentIndex = this.slides.getActiveIndex();
this.settingsChanged(this.themes[currentIndex].name, 'theme'); // TODO: ???? why not working???
}
settingsChanged(value: string, field: string) {
let payload: any = {};
payload[field] = value;
this.store.dispatch({
type: 'UPDATE_SETTINGS',
payload: payload
});
}
}
and in the template i have
<ion-item>
<ion-label>
{{ 'LANGUAGE' | translate }}
</ion-label>
<!-- ngModel won't work. async pipe not working with ngModel -->
<ion-select
[(ngModel)]="settings.language"
(ionChange)="settingsChanged($event, 'language')"
interface="popover">
<ion-option value="en">English</ion-option>
<ion-option value="ko">한국어</ion-option>
</ion-select>
</ion-item>
but since settings
is now an Observable, if i try to display the actual value using async
pipe, it works but i am not sure how i can use [(ngModel)]
to bind the data with the object.