Clear selected items on click and prevent function from always executing

Question

I'm trying to use mat-select-autocomplete but I am having some problems with its implementation.

First problem is that the function's (selectionChange) = "getSelectedOptions ($ event)" event is always running each time I click on mat-select-autocomplete. Is there a way to perform this function only when I select an option?

Second problem: is there a way to clear the selected items after clicking the submit button?

Demo

.html

<div class="container">
  <mat-select-autocomplete class="grid-7-11"
    [placeholder]="'Options Selection'"
    [errorMsg]="errorMessage"
    [showErrorMsg]="showError"
    [options]="options"
    [display]="'display'"
    [value]="'value'"
    [multiple]='true'
    [labelCount]="2"
    [selectedOptions]="selectedOptions"
    (selectionChange)="getSelectedOptions($event)">
  </mat-select-autocomplete>
</div>

<button (click)="clear()">Submit and clear selects</button>

.ts

  selected: any[]=[];
  showError = false;
  errorMessage = '';


  getSelectedOptions(selected) {
    this.selected = selected;
    console.log(this.selected)
  }

  clear(){ 
    this.selected = [];
    console.log(this.selected)
  }

Can someone help me? Thank you.

Yuriy Kravets Yuriy Kravets · Accepted Answer · 2020-03-17T12:15:42

You are using native select's selectionChange.
By looking at the documentation of mat-autocomplete you should be using optionSelected

Clear selected items on click and prevent function from always executing

1 Answers