How to add select all option to ion-select in ionic 5

Issue

I tried adding ion-select-option and then tried to handle select all logic in the change event but change event doesn't fire at all. seems it doesn't support events

    <ion-item>
        <ion-label>Test</ion-label>
        <ion-select [(ngModel)]="selectedValues" multiple="true">
            <ion-select-option (ionChange)="selectAll()">Select All</ion-select-option>
            <ion-select-option [value]="option" *ngFor="let option of  items">{{option}}
            </ion-select-option>
        </ion-select>
    </ion-item>

sample https://stackblitz.com/edit/ionic-5-angular-10-start-template-hure6j?file=src/app/tabs/tabs.page.html

Solution

I agree with Wesley that since ion-select is leveraging alert controller or popover under the hood the best way could be by using custom alert. But if you have to keep "look and feel" of ion-select you could do the following:

HTML:

<ion-item (click)="openSelector(selector)">
      <ion-label>Pizza Toppings</ion-label>
      <ion-select #selector style="pointer-events: none" [interfaceOptions]="customAlertOptions" multiple="true" [value]="basket">
      <ion-select-option *ngFor="let option of options" [value]="option">{{option}}</ion-select-option>
    </ion-select>
</ion-item>

TS:

import { Inject, Component, Renderer2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  options = ["cheese", "pepperoni", "basil"];
  basket = [];

  listener;
  selectAllCheckBox: any;
  checkBoxes: HTMLCollection;

  customAlertOptions: any = {
    header: 'Pizza Toppings',
    subHeader: 'Select All:',
    message: '<ion-checkbox id="selectAllCheckBox"></ion-checkbox>'
  };

  constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2) {}

  openSelector(selector) {
    selector.open().then((alert)=>{
      this.selectAllCheckBox = this.document.getElementById("selectAllCheckBox");
      this.checkBoxes = this.document.getElementsByClassName("alert-checkbox");
      this.listener = this.renderer.listen(this.selectAllCheckBox, 'click', () => {
          if (this.selectAllCheckBox.checked) {
            for (let checkbox of this.checkBoxes) {
              if (checkbox.getAttribute("aria-checked")==="false") {
                (checkbox as HTMLButtonElement).click();
              };
            };
          } else {
            for (let checkbox of this.checkBoxes) {
              if (checkbox.getAttribute("aria-checked")==="true") {
                (checkbox as HTMLButtonElement).click();
              };
            };
          }
      });
      alert.onWillDismiss().then(()=>{
        this.listener();
      });
    })
  }
  
}

Basically, you disable the default click handler on ion-select and pass 'selector' reference via ion-item bound click event. Then you use 'open' method of the ion-select to gain access to instance of 'alert'. Since 'message' property of the alert options supports "sanitized" HTML you can still pass an HTML element to it (checkbox) with its ID. Then using document reference you get the checkbox and add listener (later to be removed on willDismiss hook). Inside the click method you can implement the functionality of select all / none.

Demo: https://stackblitz.com/edit/ionic-angular-v5-2jqnsv?file=src/app/app.component.ts

Answered By - Sergey Rudenko