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

Ionic Framework ionic-v3
1

Hey,

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.

2

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

Maybe I could somehow solve it via @ViewChild?

My HTML:

  <ion-header>
    <ion-navbar>
      <ion-title>Movies</ion-title>
      <ion-buttons end>
        <button ion-button icon-only (click)="doFilter()">
          <ion-icon name="options"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar>
  
  </ion-header>
   
  <ion-content [hidden]="true">
        <ion-select #sectionSelect
                    [(ngModel)]="movieSelection"
                    (ionChange)="movieSelectionUpdate($event)"
                    multiple="true">
        <ion-option (ionSelect)="selectAllmovies()">Select/Deselect All</ion-option>
        <ion-option *ngFor="let movie of movies" [value]="movie.id" [selected]="movie.favored == 1">{{movie.moviename}} ({{movie.shortname}})</ion-option>      
      </ion-select>
  </ion-content>

My .ts:

  @ViewChild('sectionSelect') sectionSelect: Select;

  doFilter(){
    this.sectionSelect.open();
  }

  selectAllmovies(){
    //would it work to add logic here to update the select status on the fly, for all entries??
  }

Thanks in advance!

1 Like
3

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]="movie.id" [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