Select/Unselect All option for ion select (or different component)


after some research there is apparently no solution to add an “Select/Unselect All” value for the ion Select component when using the multiple value selection, which would automatically select all the other options.

This is an issue for me as I have a list of around 30 entries and it’s a pitty to select (unselect) them all one by one.

Hence, I would like to if there is any update on this issue, and if not, if you could suggest another approach to have a menu with a “Select/Unselect All” option (i.e. some other component, plugin, workaround etc).

Thanks in advance.

I will provide more details in my ion select component as maybe there is a solution:

Maybe I could somehow solve it via @ViewChild?


      <ion-buttons end>
        <button ion-button icon-only (click)="doFilter()">
          <ion-icon name="options"></ion-icon>
  <ion-content [hidden]="true">
        <ion-select #sectionSelect
        <ion-option (ionSelect)="selectAllmovies()">Select/Deselect All</ion-option>
        <ion-option *ngFor="let movie of movies" [value]="" [selected]="movie.favored == 1">{{movie.moviename}} ({{movie.shortname}})</ion-option>      

My .ts:

  @ViewChild('sectionSelect') sectionSelect: Select;


    //would it work to add logic here to update the select status on the fly, for all entries??

Thanks in advance!

1 Like

no rocket science needed here :slight_smile: you have done almost all! just loop through your array of movies and make movie.favored true/false as below (you can detect the select/unselect state by binding a variable to your select all option
just change your select all option to this

        <ion-option  [(ngModel)]="selectAll" [selected]=selectAll (ionSelect)="selectAllmovies()"></ion-option>

and in your controller declare a new Boolean and use this function

selectAll: boolean = false;

selectAllmovies() {
	this.movies.forEach(movie => {
		movie.favored = this.selectAll;

and your options should change a bit as:

<ion-option *ngFor="let movie of movies" [value]="" [selected]=movie.favored>{{movie.moviename}} ({{movie.shortname}})</ion-option>

and as you are binding the selected state of each option to the movie.favored it should change when you change it from selectAllmovies()

1 Like