Set ion-select text

user_8028202 0
Viewed 367

When the ion-select box is open, I need the label text to be different. Somehow, I can't seem to find a working solution I can figure out. The pictures below is my goal (achieved through changing the element in browser ATM.) Also, don't know how to change the size of those pictures. Sorry.

enter image description here enter image description here

<ion-item>
  <ion-label>Water Source</ion-label>
    <ion-select formControlName="waterSource" multiple="true">
    <ion-select-option name="Aquifer">Aquifer</ion-select-option>
    <ion-select-option name="CityWater">City Water</ion-select-option>
    <ion-select-option name="Lake">Lake</ion-select-option>
    <ion-select-option name="Pond">Pond</ion-select-option>
    <ion-select-option name="River">River</ion-select-option>
    <ion-select-option name="RuralWater">Rural Water</ion-select-option>
    <ion-select-option name="Well">Well</ion-select-option>
    <ion-select-option name="Other">Other</ion-select-option>
  </ion-select>
  <ion-input *ngIf="!customers.surveyCompleteDate" formControlName="waterSource" type="string"></ion-input>
  <ion-input *ngIf="customers.surveyCompleteDate" formControlName="waterSource" readonly></ion-input>
</ion-item>
ionic4
1 Answers

As mentioned in the docs, you can use the interfaceOptions property to set a different title for the alert (among other things).

Please take a look at this stackblitz demo.

Demo

Component

// ...
public customOptions: any = {
  header: "Pick all that apply"
};
// ...

Template

<ion-item>
  <ion-label>Water Source</ion-label>
  <ion-select [interfaceOptions]="customOptions" multiple="true">
    <ion-select-option name="Aquifer">Aquifer</ion-select-option>
    <ion-select-option name="CityWater">City Water</ion-select-option>
    <ion-select-option name="Lake">Lake</ion-select-option>
    <ion-select-option name="Pond">Pond</ion-select-option>
    <ion-select-option name="River">River</ion-select-option>
    <ion-select-option name="RuralWater">Rural Water</ion-select-option>
    <ion-select-option name="Well">Well</ion-select-option>
    <ion-select-option name="Other">Other</ion-select-option>
  </ion-select>
</ion-item>

Please also keep in mind that you can set a subHeader and even a message in case you want "Water Source" to be the main title of the alert, and show "Select all that apply" as a sub header or message since that sounds like a hint to the user but not the main title of the alert.

user_39154380
Related