I need a particular grid to be displayed only when an option is selected from ion-select

type or paste code here
<ion-content padding>
   <ion-item>
    <ion-label>Select Term</ion-label>
    <ion-select [(ngModel)]="Term" id="t" onselect="func()">
      <ion-option value="ft">First Term</ion-option>
      <ion-option value="st">Second Term</ion-option>
      <ion-option value="f">Final</ion-option>
    </ion-select>
  </ion-item>

<div *ngIf="showData">
  <ion-grid>
    <ion-row>
      <ion-col style="background-color: #4e9edb">First Term</ion-col>
    </ion-row>
    <ion-row>
      <ion-col>Subject</ion-col>
      <ion-col>Grade</ion-col>
    </ion-row>
  </ion-grid>
</div>
</ion-content>

.ts
    func(){
     this.showData = true;  }
}
Thank you in advance :slightly_smiling_face:
_

> emphasized text

_

could you describe what happens?

the grid is not displayed even when an option is selected… i guess it is because of the incomplete function definition

and two debug things

  1. you are sure your onselect function is invoked
  2. if you remove the ngIf temporarily the grid does appear

i am not sure whether the onselect function is invoked or not… but the grid does appear when i remove the ngif

add a console.log() invocation to the handler routine

i don’t know how you are debugging… I use the real device and the console log is displayed in the window doing the ionic cordova run

and another thing, change the value of the showData to true at startup to make sure the ngIf is working with the variable

according to the doc there is no ‘onselect’…

i use localhost in a browser… in that case, what can i use to replace onselect

see the doc link … looks like you use [(ngModel)]

ok…i will look into it… thank you for your time