How to hide label after selecting an option?

Ionic Framework Ionic Angular
1

Hey guys, so, I’d like to know how to hide a label after selecting an option. Here is my code:

<p>Posso esperar até:</p>
            <ion-item class="select-info ion-margin-bottom" lines="none">
                <ion-label>Escolha a data limite</ion-label>
                <ion-select>
                    <ion-select-option value="data">25/05/19</ion-select-option>
                </ion-select>
            </ion-item>

The ‘ion-select-option’ will be fed later with some extra data, inside a *ngFor. The thing is, after choosing the date, it gets like that:

image

I’d like to know if it is possible to hide the “Escolha a data limite” and show only the “25/05/19”. Thanks!

2

In order to answer your specific question, it would help to know how you are binding out the value chosen in the <ion-select>, such as if it has an [(ngModel)] or formControl. However, it may be possible to address your general concern another way: have you investigated the placeholder property of ion-select as an alternative to using an ion-label?

3

I’m binding using an [(ngModel)]. About the placeholder, I did, but I have a lot of trouble trying to change the CSS of it.

At this one I use placeholder to show “Escolha uma especialidade” and the text doesn’t wrap.

image

4

when you bind to a variable (lets call it tempVariable), you can do something like

<ion-label *ngIf="!tempVariable">Your Label</ion-label>

This will show the label only then when tempVariable is in a boolean comparison false (undefined, null, or empty string).

2 Likes
5
  1. For the wrapping issue, simply remove the ion-item

Before Remove

1
1781×222 31 KB

2

After Remove

3
3822×227 31 KB

4

  1. For the Actual requirement

As EinfachHans sudgested add a condition to the label and add (ionChange event to ion-select) as below,

5
5699×149 18.3 KB

then add method (in the ts file) to set the variable change when the ionChange event occurs
6

1 Like
6

Can’t OP achieve equivalent results without a change handler, by just keying off the [(ngModel) binding on the ion-select itself?

7

thanks man, it was really helpfull and it worked!