How to show or hide an ionic field/component at runtime depending on the chosen option on ion-select

Question

In the app I'm making I have a situation where I need to present to the user some content depending on the option chosen on a ion-select in the same page. The bellow snipet is a illustration of the actual list:

<ion-item no-lines>
    <ion-label>Options</ion-label>
    <ion-select formControlName="option">
        <ion-option *ngFor="let option of options">
            {{ option }}
        </ion-option>
    </ion-select>
</ion-item>

In this case, if one of the options, say 'option B', is chosen, then I want another list of options to be presented to the user to choose:

<ion-item no-lines>
    <ion-label>Sub options of B</ion-label>
    <ion-select formControlName="subOptionOfB">
        <ion-option *ngFor="let subOption of subOptions">
            {{ subOption }}
        </ion-option>
    </ion-select>
</ion-item>

In this case scenario, only B has the 'power' to trigger this change on the page, but here is the catch: If the user choose B, the sub-list should appear; if it chooses another option, it should disappear or, if it isn't render yet, not cause any reaction on the page, given it a dynamically feeling.

In my search I have encounter similar problems that were resolved with ngIf or hidden attributes. I have tried those but with no success: with ngIf only, the component still shows when should disappear; with hidden attribute only, it disappears only when rendering, after that nothing changes (if the component were rendered as 'invisible', than stays that way and do not show anymore; if it were rendered as 'visible', than stays that way and do not disappears anymore); using both generate the same problems as when using the hidden attribute only.

I have a feeling that this has something to do with asynchronous requests, since when I was studying Java a few months back I learn something similar when making web pages. Using asynchronous requests I could put and/or take out content depending on the situation without the need to refresh the page (which is exactly what I need), but I could not wrap my head around Observables and such yet.

Could someone please tell me what I need to do or, at least, what I'm doing wrong?

[EDIT-1]: I don't know if this changes anything, but I'm using formControlName instead [(ngModel)] for data binding.

Both lists are on the same level and not nested. Each one in their respective ion-item.

I'm using Ionic 2 with Angular 2 and TypeScript.

Emeka Obianom Emeka Obianom · Accepted Answer · 2017-06-04T12:21:28

It's just a simple case. Try and adjust your code to fit the snippets i present below.

in your html page

 ...
<ion-item no-lines>
    <ion-label>Options</ion-label>
    <ion-select formControlName="option" (ionChange)="onSelectChangeOption()" submitText="Ok" cancelText="Cancel">
        <ion-option *ngFor="let option of options">
            {{ option }}
        </ion-option>
    </ion-select>
</ion-item>

<ion-item no-lines  *ngIf="showSubOptionOfB">
    <ion-label>Sub options of B</ion-label>
    <ion-select formControlName="subOptionOfB">
        <ion-option *ngFor="let subOption of subOptions">
            {{ subOption }}
        </ion-option>
    </ion-select>
</ion-item>
...

then for your typescript page

....

  showSubOptionOfB:boolean = false; //default

  onSelectChangeOption() {

    //grab form value
    let optionValue = this.yourForm.get('option').value;

    //show subOptions
    if(optionValue == "B"){
        this.showSubOptionOfB = true;
    }
    else{
        this.showSubOptionOfB = false;
    }
      }


  //say you declared your formgroup as yourForm    
  public yourForm = this.formBuilder.group({
    option: ["", Validators.required],
    subOptionOfB: ["", Validators.required],
    ...   
    });

  ...

How to show or hide an ionic field/component at runtime depending on the chosen option on ion-select

1 Answers