Select All mat option and deselect All

by

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>

More Related Contents:

  1. PHP – Multiselect require field if option is selected [closed]
  2. How to implement multi-select in RecyclerView? [closed]
  3. Angular-cli from css to scss
  4. Apply a directive conditionally
  5. Angular 6 many Can’t resolve errors (crypto, fs, http, https, net, path, stream, tls, zlib)
  6. Upgrading to angular-6.x gives “Uncaught ReferenceError: global is not defined”
  7. jQuery multiselect drop down menu
  8. Angular 6 – process is not defined when trying to serve application
  9. Can’t return a result set in the given context
  10. How to set environment via `ng serve` in Angular 6
  11. Angular 2 Material 2 datepicker date format
  12. How can I use custom theme palettes in Angular?
  13. Angular 6 MatTable Performance in 1000 rows
  14. Angular 6 does not add X-XSRF-TOKEN header to http request
  15. custom filter in mat-table
  16. How to pass multiple parameter to @Directives (@Components) in Angular with TypeScript?
  17. how to define index in angular material table
  18. Why is the first element always blank in my Rails multi-select, using an embedded array?
  19. want to show more data in another component when view in detail button is clicked (angular 6)
  20. Dynamically load a component inside a Material MatDialog
  21. How to select multiple options from multi select list using Selenium-Python?
  22. How to prevent angular material mat-menu from closing?
  23. Angular 4 Material table highlight a row
  24. SassError: Can’t find stylesheet to import. @use ‘~@angular/material’ as mat;
  25. refreshing the page results in 404 error- Angular 6
  26. Angular Mat Select Multiple selectionchange finding which option was changed
  27. How to change angular material datepicker format
  28. How to implement drag and drop in cypress test?
  29. Angular Material2 theming – how to set app background?
  30. Filtering specific column in Angular Material Table with filtering in angular?

Leave a Comment