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>
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
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
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).
- For the wrapping issue, simply remove the ion-item
- 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
Can’t OP achieve equivalent results without a change handler, by just keying off the
[(ngModel) binding on the
thanks man, it was really helpfull and it worked!