Ion-select-option unable to give any event

Ionic Framework Ionic Angular
1

I want to implement select all functionality for . this is what i did

<ion-select multiple=“true” [(ngModel)]=“day” name=“day” (select)=“selectAll(myselect)” required >

  <ion-select-option  value="selectall" (onSelect)="SelectAll()"> select all</ion-select-option>

   

  <ion-select-option value="Monday">Monday</ion-select-option>

   <ion-select-option value="Tuesday">Tuesday</ion-select-option>

   <ion-select-option value="Wednesday">Wednesday</ion-select-option>

   <ion-select-option value="Thursday">Thursday </ion-select-option>

   <ion-select-option value="Friday">Friday </ion-select-option>

   <ion-select-option value="Saturday">Saturday</ion-select-option>

   <ion-select-option value="Sunday">Sunday </ion-select-option>

 </ion-select>

I am not able to give any event on . I checked the response at console and nothing was reflected there.
Instead of (onSelect): - (onChange), (change), (select) was tried.

2

As a user, I would find this interface unintuitive. How about moving “select all” to a separate checkbox outside of the select?

3

no I want it inside .

select all

4

The Material Design guidelines on checkboxes specifically address this situation. The “select all” parent checkbox needs to be visually set off and able to go tristate in order to capture this functionality. I don’t think it’s implementable by pretending “select all” is just another day.

5

Right. Thank you. I will have to look at different approach to get this done. If you have any suggestion let me know.

6

My suggestion is to make a separate “select all” button that lives outside the list of days.

7

the event you should be listening for is ionChange

8

you can use this way…
<ion-select (Click)=“SelectAll()”>
you can use your own logic , onclick if true select all,
if false unselect all

9 
<ion-header>
	<ion-toolbar>
		<ion-title>
			Tab Two
		</ion-title>
	</ion-toolbar>
</ion-header>

<ion-content>
	<ion-item>
		<ion-label>SELECT SOMETHING</ion-label>
		<ion-select multiple="true" [(ngModel)]="day" name="day" required (ionChange)="selectAll($event)" >

			<ion-select-option value="selectall" > select all</ion-select-option>

			<ion-select-option value="Monday">Monday</ion-select-option>

			<ion-select-option value="Tuesday">Tuesday</ion-select-option>

			<ion-select-option value="Wednesday">Wednesday</ion-select-option>

			<ion-select-option value="Thursday">Thursday </ion-select-option>

			<ion-select-option value="Friday">Friday </ion-select-option>

			<ion-select-option value="Saturday">Saturday</ion-select-option>

			<ion-select-option value="Sunday">Sunday </ion-select-option>

		</ion-select>
	</ion-item>
  {{day}}
</ion-content>

import { Component } from "@angular/core";

@Component({
  selector: "app-tab2",
  templateUrl: "tab2.page.html",
  styleUrls: ["tab2.page.scss"]
})
export class Tab2Page {
  ALL_DAYS = [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday"
  ];
  day = [];

  constructor() {}

  selectAll(_event) {
    console.log("in select all", _event);
    if (_event.detail.value.includes("selectall")) {
      this.day = this.ALL_DAYS;
    }
  }
}