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

Ionic Framework Ionic Angular
1

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

2

Your code does not work because you placed the ionChange in the wrong place…

This is how you code should look like…

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

Check my answer on stack overflow https://stackoverflow.com/questions/64029899/how-to-add-select-all-option-to-ion-select-in-ionic-5

1 Like
4

Please adopt something along the lines of @redcort’s solution. It is important to make “select all” not look like the rest of the options.

1 Like
5

yep, this could help

6

with the help of stack overflow answers here https://stackoverflow.com/q/64029899 I have created a directive for my requirements. Thanks everyone :slight_smile:

full code here : https://stackblitz.com/edit/ionic-5-angular-10-start-template-nmvldz?file=src/app/tabs/select-all-directive.ts