How to hide label after selecting an option?

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-option value="data">25/05/19</ion-select-option>

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:


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

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?

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.


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).

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

Before Remove


After Remove


  1. For the Actual requirement

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

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

1 Like

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

thanks man, it was really helpfull and it worked!