Q:

How to pass value from html to typescript while value getting from for loop

I'm developing Hybrid app using ionic 2. i am stuck in pass value from html to typescript. in this page i have first set select option from ion-select and i have set for loop(ngFor) in ion-option. below select option i have put button for add selected service to database(button is outside of ngFor so i can't send option id to typescript) and i had set option name in value.

my code is below

<ion-item>
  <ion-label>Service type</ion-label>
  <ion-select [(ngModel)]="serviceName" >
    <ion-option value="{{x.name}}" *ngFor="let x of servicelist">{{x.name}}</ion-option>
  </ion-select>
</ion-item>

<button ion-button (click)="addService()"> Add service</button>

A:

You can do following:

<ion-item>
  <ion-label>Service type</ion-label>
  <ion-select [(ngModel)]="selectedService" >
    <ion-option [value]="x" *ngFor="let x of servicelist">{{x.name}}</ion-option>
  </ion-select>
</ion-item>

<button ion-button (click)="addService(selectedService)"> Add service</button>



in button you can pass anything from selectedService object.

