Change Ion-Select Alert Label Text


Is there a way to change the alert label text for a ion-select instead of using the text inside the ion-option?

For example, suppose I have this array:

let opts = [
    {text: 'Key1', value: 1, abbreviation: 'K1'},
    {text: 'Key2', value: 2, abbreviation: 'K2'},
    {text: 'Key3', value: 3, abbreviation: 'K3'},
    {text: 'Key4', value: 4, abbreviation: 'K4'},
    {text: 'Key5', value: 5, abbreviation: 'K5'},
    {text: 'Key6', value: 6, abbreviation: 'K6'},
    {text: 'Key7', value: 7, abbreviation: 'K7'},
    {text: 'Key8', value: 8, abbreviation: 'K8'},
    {text: 'Key9', value: 9, abbreviation: 'K9'}

And this HTML

    <ion-option *ngFor='let opt in options' [value]='opt'>{{opt.abbreviation}}</ion-option>

This will have a select with options showing their abbreviation. When I click on the select, an alert will open with radio options with their label text being the abbreviation. In this example, is there a way to have the alert radio option labels show the text value instead of the abbreviation value?


I’m confused why you don’t want to just change {{opt.abbreviation}} to {{opt.text}}.


In the case I’m working with, the select would be small in width so the opt.text would be cut off with text overflow ellipsis.


The method is backwards from the way you describe your hope, but I think you can achieve the underlying goal like this:

<ion-select [selectedText]="selabbrev" (ionChange)="onProductSelected($event)">
<ion-option *ngFor="let prod of prods" [value]="prod">{{prod.text}}</ion-option>

interface Product {
  text: string;
  value: number;
  abbrev: string;

selprod: Product;
selabbrev: string;

onProductSelected(prod: Product): void {
  this.selprod = prod;
  this.selabbrev = prod.abbrev;


That works! I used the [selectedText] and pointed it directly to the form value, since I used formcontrols, and it worked perfectly. Thank you so much!