Clear mat-select selection Angular material

Question

I have implemented mat-multi-select option. I have a search functionality and I am able to select multiple options at once. Post selection when I click generate button, I want to clear all the selections. I am able to clear the values from search bar but values are still selected if I open the multi select dropdown. How can I clear those values.

HTML Code

<mat-select [formControl]="cMultiCtrl" [multiple]="true" required (selectionChange)="selectionChange($event)">
              <mat-option>
              <ngx-mat-select-search placeholderLabel="Search" noEntriesFoundLabel="No Matching Value Found" [formControl]="cMultiFilterCtrl"></ngx-mat-select-search>
            </mat-option>
              <mat-option *ngFor="let val of filteredCMulti | async" [value]="val.value">
                {{val.name}}
              </mat-option>
            </mat-select>

// the button on click of which I want to clear everything post API call

<button mat-raised-button (click)="generate()" class="download-button">Generate
  </button>

TS Code

 public filteredCMulti: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
 public cMultiCtrl: FormControl = new FormControl();

ngOnInit() {
this.filteredCMulti.next(this.cvalues.slice());
this.cMultiFilterCtrl.valueChanges
      .pipe(takeUntil(this._onDestroy))
      .subscribe(() => {
        this.filterBanksMulti();
      });
}
ngAfterViewInit() {
    this.setInitialValue();
  }
ngOnDestroy() {
  this._onDestroy.next();
  this._onDestroy.complete();
}
private setInitialValue() {
  this.filteredCMulti
    .pipe(take(1), takeUntil(this._onDestroy))
    .subscribe(() => {          
      this.singleSelect.compareWith = (a, b) => a.id === b.id;
    });
}
 selectionChange(event){
      this.cvalue = event.value;
  }
private filterBanksMulti() {
  if (!this.cvalues) {
    return;
  }
  let search = this.cMultiFilterCtrl.value;
  if (!search) {
    this.filteredCMulti.next(this.cvalues.slice());
    return;
  } else {
    search = search.toLowerCase();
  }
  // filter the banks
  this.filteredCMulti.next(
    this.cvalues.filter(bank => bank.name.toLowerCase().indexOf(search) > -1)
  );
}
generate(){
    let msg = '';
     
// some logic here

        else{
          this.commonService.showSnackBar("Value generated")
          this.filteredCMulti = new ReplaySubject; // this clears the search bar but not values, they are still selected 
          this.table();
        }}
    })
  }

Vigor

Try this.cMultiCtrl.reset(). – Pincushion

Answer 1

Provide an element ref to your <mat-select>

<mat-select #matRef [formControl]="cMultiCtrl" [multiple]="true" required (selectionChange)="selectionChange($event)">
          <mat-option>
          <ngx-mat-select-search placeholderLabel="Search" noEntriesFoundLabel="No Matching Value Found" [formControl]="cMultiFilterCtrl"></ngx-mat-select-search>
        </mat-option>
          <mat-option *ngFor="let val of filteredCMulti | async" [value]="val.value">
            {{val.name}}
          </mat-option>
        </mat-select>

And update your ts file like:

@ViewChild('matRef') matRef: MatSelect;

clear() {
  this.matRef.options.forEach((data: MatOption) => data.deselect());
}

You can optimize clear() by conditionally calling deselect()

Mcfadden

Don't forget to import import { MatOption } from '@angular/material/core'; and import { MatSelect } from '@angular/material/select';. – Direction