Ionic select ngModel whole object

Question

My code looks like that:

<ion-select [(ngModel)]="current_language" okText="Okay" cancelText="Dismiss" (ionChange)="changeLanguage()">
    <ion-select-option *ngFor="let language of languages" [value]="language">{{language.name}}
    </ion-select-option>
  </ion-select>

when I choose one of them and click "Okay" in .ts file current_language is exactly what I have chosen. but the problem is that I think another way of binding doesn't work. because initially current_language is not chosen when I enter the page.

this is my language:

Language{
id: number;
name: string;
flag: string;
code: string;
status: number;

}

so what should I do to have two way binding of Language object? Because I need the whole Language object that was chosen.

Answer 1

you should set it to select:

<ion-item>
      <ion-label>Language</ion-label>
      <ion-select [(ngModel)]="current_language">
          <ion-option *ngFor="let language of languages; let i = index" [value]="language" [selected]="i === 0"> // selects first item
              {{language.name}} 
          </ion-option>
      </ion-select>
  </ion-item>

or value your ngModel with one of your array's item:

<ion-item>
      <ion-label>Language</ion-label>
      <ion-select [(ngModel)]="current_language">
          <ion-option *ngFor="let language of languages;" [value]="language">
              {{language.name}} 
          </ion-option>
      </ion-select>
  </ion-item>

in ts:

current_language = this.languages[0]; // selects first item

update: if you are getting the current language form store:

ngOnInit(){
    let fromStore: Language =  {name: 'second' , id:1};
    let index: number = this.languages.findIndex(item => item.id === fromStore.id);
    this.current_language = this.languages[index];
  }

check DEMO.