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

Question

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>

can you make it clearer? like what should happen exactly, what do you want to pass? — maha
– maha, Commented Aug 30, 2018 at 12:00
in addService(), you could just get by this: this.serviceName.id — Rhadamez Gindri Hercilio
– Rhadamez Gindri Hercilio, Commented Aug 30, 2018 at 12:00
(click)="addService(serviceName)" ? Otherwise why would you use a [(ngModel)] ? — user4676340
– user4676340, Commented Aug 30, 2018 at 12:01
i want to pass x.name and x.id on click "Add service" button. — Sandip Moradiya
– Sandip Moradiya, Commented Aug 30, 2018 at 12:06
You should wrap the whole thing into a form and work with the form values when submitting using the button. — masimplo
– masimplo, Commented Aug 30, 2018 at 12:20

Ranjeet Avghad · Accepted Answer · 2018-08-30 13:51:27Z

3

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.

answered Aug 30, 2018 at 13:51

Ranjeet Avghad

3851 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related