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

Ionic Framework ionic-v3
1 
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

_
2

could you describe what happens?

3

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

4

and two debug things

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

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

6

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’…

7

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

8

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

9

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