angular mat-select, select all using Boolean function?

Question

How can we implement select all in angular mat-select using Boolean function. not using form tag and form builder.

Component.html

<div layout="column" class="mat-cloumn w-25">
  <mat-form-field appearance="fill">
    <mat-label>Location</mat-label>
    <mat-select class="user-control" multiple>
      <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
      <mat-option  [value]="store.id" *ngFor="let store of stores">{{ store.name }}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

component.ts

  notSelectedAll = true;

  stores = [
    {id:1,name:'store - 1'},
    {id:2,name:'store - 2'},
    {id:3,name:'store - 3'},
    {id:4,name:'Store - 4'}
  ];

toggleAllSelection(){
  if(this.notSelectedAll = !this.notSelectedAll){
    console.log(false)
  }else{
    console.log(true)
  }
}

How can we implement select all in angular mat-select

Hi, just asking, did you check this answer https://stackoverflow.com/questions/51580095/select-all-mat-option-and-deselect-all ? — Koraxos, Oct 15 '20 at 10:20
I'v done the same thing with a tree-multi-select using material, i had to simulate a fake value for the mat option representing the value 'Check all', globally i 'v done something similar that this answer , does this help? I'm pretty sure that i can write a good answer later if you need — Koraxos, Oct 15 '20 at 10:27
i'm working on, i think this might be what you want ? https://stackblitz.com/edit/angular-material-with-angular-v5-hxq4fa?file=app/app.component.ts — Koraxos, Oct 15 '20 at 10:53
Just to be sure, you use template driven form or reactive form or only a formControl alone, if only a formControl, in template-driven way or reactive way? — Koraxos, Oct 15 '20 at 12:02
Thank you for the edit i think , you are not far from the solution, just adding a variable in your .ts, that would map as the value of the MatSelect should work if used properly, i'll try tu put my answer in 1 or 2 hour — Koraxos, Oct 15 '20 at 14:53

Koraxos · Accepted Answer · 2020-10-16T07:21:45.353

so the thing is that a MatSelect with multiple enabled, takes an Array of value,

If you want to toggleAllNode by clicking on one, you have to call a function that will set all the value inside the MatSelect, it is why you need another variable

so here is your template

 <mat-form-field appearance="fill">
 <mat-select [value]='value' class="user-control" multiple>
    <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
    <mat-option [value]="store.id" *ngFor="let store of stores"
(click)="valueChange(store.id)" >{{ store.name }}</mat-option>
</mat-select>

And the .ts

export class AppComponent {

   value = [];

   selectAll = false;

   stores = [
     { id: 2, name: "store - 1" },
     { id: 3, name: "store - 2" },
     { id: 4, name: "store - 3" },
     { id: 5, name: "Store - 4" }
   ];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {}

  // Function used to properly bind the values on 1 MatOption
  valueChange(id: number) {
  if (this.value.indexOf(id) > -1) {
  //find the index of the element to delete if present
  const pos = this.value.indexOf(id);
  this.value.splice(pos, 1);
  } else {
  // else you push the selected value
  this.value.push(id);
 }
}
  //function to select of deselect All
  toggleAllSelection() {
  this.selectAll = !this.selectAll;
  console.log(this.selectAll);
  if (this.selectAll == true) {
    this.value = [0, 2, 3, 4, 5];
  } else {
    this.value = [];
   }
 }
}

(Edit after missing function for single value).

Since you don't use any form from angular at all, you need to handle all actions by hand to make the value communicate properly between MatSelect and the graphic Output.

Here value is use to keep the result of the selected Node, But also by passing it in the template of the mat-form-field, it allows the MatSelect to check correctly the corresponding MatOptions

A link to the updated stack blitz : https://stackblitz.com/edit/angular-material-with-angular-v5-3arsoh?file=app/app.component.html

Still i think you could have less code just with a formControl if you don't want to use a FormGroup or a FormBuilder.

angular mat-select, select all using Boolean function?

1 Answers1