CODEWITHSUNDEEP
angularionic3
Umaiz Khan
Umaiz Khan

Reputation: 1227

Ionic 3 show ion-item on select

i need to show the item when i slect an option but im not sure how ill do this if any one can help thanks 

    <ion-item>
        <ion-label floating>Reward </ion-label>
        <ion-select>
                <ion-option >Price reduction</ion-option>
                <ion-option (click)="onButtonClick()" >Discount </ion-option>
            </ion-select>
    </ion-item>

    <ion-item *ngIf="buttonClicked" >
        <ion-label floating>Discount Percentage </ion-label>
        <ion-input type="text" ></ion-input>

    </ion-item>

i want when i click on discount then the ion item show other wise it will not show . its working fine on button when i apply it on ion-option its not working . Thanks in advance

Upvotes: 2

Views: 89

Answers (1)

AVJT82
AVJT82

Reputation: 73357

Use ionChange instead, and put the function call on the ion-select tag, not ion-option. As you want to only show the div if discount is chouse, we set a value for the options and check that in the function:

<ion-select (ionChange)="onButtonClick($event)">
  <ion-option value="reduction">Price reduction</ion-option>
  <ion-option value="discount">Discount</ion-option>
</ion-select>

TS: 

onButtonClick(ev) {
  ev === 'discount' ? this.buttonClicked = true : this.buttonClicked = false;
}

StackBlitz

Upvotes: 2

Related Questions