CODEWITHSUNDEEP
angularionic3
Taieb
Taieb

Reputation: 920

Call a method when select value is changed Ionic 3

The HTML

    <ion-select interface="popover" [(ngModel)]="selectV">
      <ion-option *ngFor="let human of humans" [value]="v.id">{{v.name}}</ion-option>
      <ion-option onChange="openModal()">GO TO THE MODAL</ion-option>
    </ion-select>
  </ion-item>

This is the method

  openModal() {
    console.log('working')
    this.modalCtrl.create(MyModal).present();
  }

I want as soon as i Salect the "Go to the modal", it will call the method that will open the modal page.

Upvotes: 1

Views: 2952

Answers (2)

Tomasz Kula
Tomasz Kula

Reputation: 16837

You can split your [(ngModel)] into [ngModel] and (ngModelChange).

component.ts

class Component {
  selectV: any;

  onChange(value: any) {
    this.selectV = value;
    if (value === 'openModal') {
      this.openModal()
    }
  }
}

component.html

<ion-select interface="popover" [ngModel]="selectV" (ngModelChange)="onChange($event)>
  <ion-option *ngFor=" let human of humans " [value]="v.id ">{{v.name}}</ion-option>
  <ion-option [value]='openModal'">GO TO THE MODAL</ion-option>
</ion-select>

Upvotes: 2

bugs
bugs

Reputation: 15313

You can listen to the ionChange event:

<ion-select #MySelect ionChange="onChange(MySelect.value)"> 
   <ion-option *ngFor="let human of humans" [value]="v.id">{{v.name}}</ion-option>
   <ion-option value="goToModal">GO TO THE MODAL</ion-option>
</ion-select>

And open your modal when the selected value is the right one:

onChange(value) {
  if (value ==='goToModal') {
    this.openModal();
  };
}

Upvotes: 0

Related Questions