Ionic3 - how to pass selected value to event using ion-select and ion-option?

Question

I want to pass employee id on change of ion-option. I tried this, but it is not working, please tell me in case of any mistakes Here is my code:

<ion-label>Employee</ion-label>
<ion-select formControlName="employee">
    <ion-option *ngFor="let employee of employees" (ionChange)="selectEmployee($event, employee)">{{ employee.FirstName + " " + employee.MiddleName + " " + employee.LastName }}</ion-option>
</ion-select>

employee.ts file code:

selectEmployee(event, employee)
{
    alert(employee.EMP_ID);
}

Answer 1

The correct event to use with ion-option is ionSelect.

 <ion-option *ngFor="let employee of employees" (ionSelect)="selectEmployee($event, employee)">{{ employee.FirstName + " " + employee.MiddleName + " " + employee.LastName }}</ion-option>

This will be fired when user selects the specific option.

Since you are using reactive form, you can use valueChanges observable of the formGroup or formControl.

 this.yourForm.controls['employee'].valueChanges.subscribe(data=>console.log(data));

This will get called after user clicks OK in the select form.

Answer 2

You can do it using ngModel to pass values on option selected. Below the object of the option selected is passed via ngModel using a variable named emp. This variable should be declared in your employee.ts globally, that you may use it throughout the class.

employee.html

<ion-select [(ngModel)]="emp" interface="popover">          
   <ion-option *ngFor="let employee of employees" [value]=employee>{{ employee.FirstName + " " + employee.MiddleName + " " + employee.LastName }}</ion-option>
</ion-select>

If you need to do anything when select option changes like populating new design contents based on the option selected or if you need to write any instant logic depending upon the option selected, then you can include ionChange inside the select tag and call a function on ts class like below.

<ion-select [(ngModel)]="emp" interface="popover" (ionChange)="onEmpSelected()">          
   <ion-option *ngFor="let employee of employees" [value]=employee>{{ employee.FirstName + " " + employee.MiddleName + " " + employee.LastName }}</ion-option>
</ion-select>

If you do some logic without the necessity of a global variable, the you can get rid of ngModel, and do it inside the function alone, then you should use ionSelect inside the option tag by removing ionChange from the select tag like below.

<ion-select interface="popover">
   <ion-option *ngFor="let employee of employees" (ionSelect)="onEmpSelected(employee)">{{ employee.FirstName + " " + employee.MiddleName + " " + employee.LastName }}</ion-option>
</ion-select>

employee.ts

Declare emp globally and use it wherever necessary if using ngModel. The whole employee object would be available on your employee.ts file. And if you are calling the function using ionChange, write your logic in the function you've called.

onEmpSelected() {

// write your logic here

}

And if you are using ionSelect without ngModel, then the selected option data would be available locally to be accessed by the function like below.

onEmpSelected(employee) {

// write your logic here

}