title: Clear mat-select selection Angular material
body: <p>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.</p>
  <p>HTML Code</p>
  <pre><code>&lt;mat-select [formControl]=&quot;cMultiCtrl&quot; [multiple]=&quot;true&quot; required (selectionChange)=&quot;selectionChange($event)&quot;&gt;
                &lt;mat-option&gt;
                &lt;ngx-mat-select-search placeholderLabel=&quot;Search&quot; noEntriesFoundLabel=&quot;No Matching Value Found&quot; [formControl]=&quot;cMultiFilterCtrl&quot;&gt;&lt;/ngx-mat-select-search&gt;
              &lt;/mat-option&gt;
                &lt;mat-option *ngFor=&quot;let val of filteredCMulti | async&quot; [value]=&quot;val.value&quot;&gt;
                  {{val.name}}
                &lt;/mat-option&gt;
              &lt;/mat-select&gt;
  
  // the button on click of which I want to clear everything post API call
  
  &lt;button mat-raised-button (click)=&quot;generate()&quot; class=&quot;download-button&quot;&gt;Generate
    &lt;/button&gt;
  </code></pre>
  <p>TS Code</p>
  <pre><code> public filteredCMulti: ReplaySubject&lt;any[]&gt; = new ReplaySubject&lt;any[]&gt;(1);
   public cMultiCtrl: FormControl = new FormControl();
  
  ngOnInit() {
  this.filteredCMulti.next(this.cvalues.slice());
  this.cMultiFilterCtrl.valueChanges
        .pipe(takeUntil(this._onDestroy))
        .subscribe(() =&gt; {
          this.filterBanksMulti();
        });
  }
  ngAfterViewInit() {
      this.setInitialValue();
    }
  ngOnDestroy() {
    this._onDestroy.next();
    this._onDestroy.complete();
  }
  private setInitialValue() {
    this.filteredCMulti
      .pipe(take(1), takeUntil(this._onDestroy))
      .subscribe(() =&gt; {          
        this.singleSelect.compareWith = (a, b) =&gt; 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 =&gt; bank.name.toLowerCase().indexOf(search) &gt; -1)
    );
  }
  generate(){
      let msg = '';
       
  // some logic here
  
          else{
            this.commonService.showSnackBar(&quot;Value generated&quot;)
            this.filteredCMulti = new ReplaySubject; // this clears the search bar but not values, they are still selected 
            this.table();
          }}
      })
    }
  
  
  </code></pre>