How do I bind a change from the view back to the controller?

Question

I'm trying to get a feel for ionic2/angular2 and have gotten stuck on how to bind a change from the view back to the controller.

In the snippet below, I set up two modal select boxes, but neither propagates the model change back to the controller-- it reloads the defaults. How can I pass the variables back?

HTML:

  <ion-select [(ngModel)]="base" (ngModelChange)="loadCurrencyExchange()">
    <ion-option *ngFor="let b of supportedCurrencies" value="{{b}}">
      {{b}}
    </ion-option>
  </ion-select> to

  <ion-select [(ngModel)]="symbols" (ngModelChange)="loadCurrencyExchange()" multiple="true">
    <ion-option *ngFor="let s of supportedCurrencies" value="{{s}}">
      {{s}}
    </ion-option>
  </ion-select>

JS (updated based upon answers):

 export class HomePage {
    public currenciesLoaded: any;
    public supportedCurrencies: string[];
    @Output() public exchangeRates: any;
    public dataLoaded: boolean;

    @Input() base: string = 'USD';
    @Input() symbols: string[] = ['EUR','RUB'];

    constructor(public CurrencyService: CurrencyService) {
        var base: string = this.base;
        var symbols: string[] = this.symbols;
        this.loadCurrencyList();
        this.loadCurrencyExchange();
    }

    loadCurrencyList(){
        this.supportedCurrencies =this.CurrencyService.loadCurrencySymbols();
    }

    loadCurrencyExchange(){
        this.CurrencyService.loadCurrencies(this.base, this.symbols)
            .then(data => {
                console.log(this.base + ' to ' + this.symbols.join(','));
                this.exchangeRates = data;
                this.currenciesLoaded = Object.keys(data.rates);
                this.dataLoaded = true;
            })
    }
}

Manu Valdés · Accepted Answer · 2016-05-27T09:49:40.483

edit:

there is a somewhat buggy behaviour when you have multiple selects; I have found that a way to isolate their models is to embed them inside an ion-item; check this plunker for a working version: there is no need for @Input or @Output decorators.

  <ion-item>
    <ion-select name="select1" [(ngModel)]="base" (ngModelChange)="loadCurrencyExchange()">
      <ion-option *ngFor="let b of supportedCurrencies" value="{{b}}">
        {{b}}
      </ion-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-select name="select2" [(ngModel)]="symbols" (ngModelChange)="loadCurrencyExchange()" multiple="true">
      <ion-option *ngFor="let s of supportedCurrencies" value="{{s}}">
        {{s}}
      </ion-option>
    </ion-select>
  </ion-item>

How do I bind a change from the view back to the controller?

1 Answers1