How to use ion-select placeholder?

Ionic Framework ionic-v3
1

Kinda of a follow up to this question. It should be implemented now, and it is in the ion-select docs.

placeholder: string: “The text to display when the select is empty.”

Here is how I used it:

<ion-item>
     <ion-label>label:</ion-label>
     <ion-select [placeholder]="Duration">
          <ion-option [value]="x">x</ion-option>
     </ion-select>
</ion-item>

And the problem is it shows nothing ! just an empty select until I choose an option then it displays the option.
Also If I inspect the code, the div with class="select-placeholder select-text" is empty.

Am I using it wrong somehow? Or is it not really implemented yet? If it’s not, is there is any workaround?

1 Like
2

Didn’t expect to find the solution that fast.
There is more than one way to use it:
1-

<ion-select [placeholder]="Duration">
     <ion-option [value]="x">x</ion-option>
</ion-select>
  • Where “Duration” has to be a variable.

2-
Same as 1 but if you use " ’ Duration ’ " it will interpret it as string. -note the single quotas inside of the double one.

3- Which I guess what the doc meant but I didn’t understand - I would argue that it’s never clear when to use the square brackets and when not to (in the context of the docs)- :

<ion-select placeholder="Duration">
     <ion-option [value]="x">x</ion-option>
</ion-select>
  • Where “Duration” is not a variable and is used as it is. -note the use of the attribute with out square brackets.
2 Likes
3

I use it like this:

        <ion-item>
          <ion-label>
            <ion-icon name="mail"></ion-icon>
          </ion-label>
          <ion-input [(ngModel)]="this.settingsService.Username" placeholder="Email" type="text"></ion-input>
        </ion-item>
1 Like
4

Yeah I just figured it out. Thank you.