Menu
I have scenario as below:
I want to achieve is:
All then All and clicked checkbox shall be deselected.HTML file
<mat-select placeholder="User Type" formControlName="UserType" multiple> <mat-option *ngFor="let filters of userTypeFilters" [value]="filters.key"> {{filters.value}} </mat-option> <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option> </mat-select> TS file
this.searchUserForm = this.fb.group({ userType: new FormControl('') }); userTypeFilters = [ { key: 1, value: 'Value 1', }, { key: 2, value: 'Value 2', }, { key: 3, value: 'Value 3', }, { key: 4, value: 'Value 4', } ] toggleAllSelection() { if (this.allSelected.selected) { this.searchUserForm.controls.userType .patchValue([...this.userTypeFilters.map(item => item.key), 0]); } else { this.searchUserForm.controls.userType.patchValue([]); } } Now, how to achieve 2nd and 3rd point
Stackblitz is: https://stackblitz.com/edit/angular-material-with-angular-v5-znfehg?file=app/app.component.html
518
We can use NgModel to get and set values in Select option for Angular Material Select as well as native Select.
The problem is you have a single variable allSelected to control both of the mat-select boxes, and you have also given both mat-select boxes the same ID of mySel. This is why it selects all on the first mat-select when you use the select all option in the second one.
And you'll notice I've also changed the call to toggleAllSelection - it now passes the mat-select in as a parameter. The first part of the function looks through the options of the mat-select passed in as a paramter, and finds the option with the value 0 (due to how you've defined your HTML, the "Select All" option always has the value 0 ).
When user click on All then all options shall be selected and when user click All again then all options shall be deselcted. If All option is checked and user click any other checkbox than All then All and clicked checkbox shall be deselected.
Another way to do this is with the @ViewChild selector to get the mat-select component and troggle the mat-options items selected or unselected. We need also a variable to save the selected actual status to select or unselect all the elements on every click. Hope will help.
Use code as below create function on click each mat-option and select()/deselect() all option:
See stackblitz:https://stackblitz.com/edit/angular-material-with-angular-v5-jsgvx6?file=app/app.component.html
TS:
togglePerOne(all){ if (this.allSelected.selected) { this.allSelected.deselect(); return false; } if(this.searchUserForm.controls.userType.value.length==this.userTypeFilters.length) this.allSelected.select(); } toggleAllSelection() { if (this.allSelected.selected) { this.searchUserForm.controls.userType .patchValue([...this.userTypeFilters.map(item => item.key), 0]); } else { this.searchUserForm.controls.userType.patchValue([]); } } HTML:
<form [formGroup]="searchUserForm" fxFlex fxLayout="column" autocomplete="off" style="margin: 30px"> <mat-select placeholder="User Type" formControlName="userType" multiple> <mat-option *ngFor="let filters of userTypeFilters" [value]="filters.key" (click)="togglePerOne(allSelected.viewValue)"> {{filters.value}} </mat-option> <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option> </mat-select> </form> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
