Add "Select All'' button to ion-select

0
votes

I'm using ionic 4 and I want to set custom buttons on ion-select through interfaceOptions

HTML

<ion-item>
  <ion-label>Lines</ion-label>
  <ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOptions">
    <ion-select-option [value]="line" *ngFor="let line of Lines">{{linea.Name}}</ion-select-option>
  </ion-select>
</ion-item>

TS

customAlertOptions: any = {
buttons: [
  {
    text: 'Select All',
    handler: (blah) => {
      console.log('Select All Clicked');
    },
  {
    text: 'No',
    handler: (blah) => {
      console.log('Confirm Cancel: blah');
    }
  }, {
    text: 'Okay',
    handler: () => {
      console.log('Confirm Okay');
    }
  }
]

};

However, only the default buttons are showing (Ok and Cancel)

Docs say it should be possible

https://ionicframework.com/docs/api/select

I can see this has been reported for previous versions of Ionic

https://forum.ionicframework.com/t/custom-button-for-ion-select-through-selectoptions-not-working/157305

Is it possible to make this work on Ionic 4? Is there a workaround?

EDIT: I tried with the PopOver interface with the same results

2
htmltypescriptionic-frameworkionic4

2 Answers

1
votes

What you are trying to do isn't possible from what I can see.

The documentation actually only says you can set the buttons text:

By default, the alert has two buttons: Cancel and OK. Each button's text can be customized using the cancelText and okText properties.

It doesn't say that the buttons can be customised.

You can pass in the interfaceOptions but its overridden later by the default button set:

The code looks like this:

const alertOpts: AlertOptions = {
  mode,
  ...interfaceOptions,

  header: interfaceOptions.header ? interfaceOptions.header : labelText,
  inputs: this.createAlertInputs(this.childOpts, inputType),
  buttons: [
    {
      text: this.cancelText,
      role: 'cancel',
      handler: () => {
        this.ionCancel.emit();
      }
    },
    {
      text: this.okText,
      handler: (selectedValues: any) => {
        this.value = selectedValues;
      }
    }
  ],
  cssClass: ['select-alert', interfaceOptions.cssClass,
             (this.multiple ? 'multiple-select-alert' : 'single-select-alert')]
};
return alertController.create(alertOpts);

So as you can see the ...interfaceOptions, is passed in at the start, then the buttons are set to the defaults, with the only customisation options being the ok or cancel text.

0
votes

i am working with AlertController from ionic and i can custom it, just take a look at my screen .

You just need to import AlertController and after you can do something like this for exemple :

home.page.ts

async addAlertHome(adresse: string, lat: string, lon: string) {
    const alert = await this.alertController.create({
      header: 'Ajouter aux favoris',
      message: 'Êtes vous sûr de vouloir ajouter cette adresse à vos favoris ?',
      buttons: [
        {
          text: 'Non',
          role: 'cancel',
          cssClass: 'secondary'
        }, {
          text: 'Oui',
          handler: () => {
            alert.dismiss().then(() => {
              this.addFavoriteHome(adresse, lat, lon);
            });
            console.log('Confirm Okay');

          }
        }
      ]
    });


    await alert.present();
  }

And use it where you want on html : home.page.html

<ion-icon name="heart-empty" (click)="addAlert(location.display_name, location.lat, location.lon)" end>
            </ion-icon>

And don't forget on your constructor :

public alertController: AlertController