How to get current state of MatSelect element (Multiselect) in angular material

Question

I am using MatSelect with a multi-select option. On every element check or uncheck there is a typescript function which will be called every time so the problem is, I am not able to differentiate which click event is populated from UI for ex. Apple checked then call API and if Apple unchecked then do nothing

.html file

 <mat-form-field>
    <mat-select [(value)]="selected" formControlName="tagList" id="tagList" placeholder="Select Tag" name="tagList" multiple>
      <mat-option *ngFor="let tag of tagList" [value]="tag" 
         (click)="isSelectedTagIsCallback(tag, $event.value)">
         {{tag.name}}
      </mat-option>
    </mat-select>
 </mat-form-field>

.ts file

isSelectedTagIsCallback(data, event) {
      if(checked){
         // Call API
      }
     else{
       // Do nothing
     }
}

Is above approach is wrong or right? If right then how do I get that checked/ Unchecked event or flag to call an API on the basis of value

Answer 1

Try this, you don't need to pass option value into function: In your typescript like this:

selected: any = '';
isSelectedTagIsCallback() {
    if(this.selected!=''){
       alert(this.selected); //CALL API Here
    }else{
       // Do nothing
}

In your html as you posted replace isSelectedTagIsCallback(tag, $event.value) to isSelectedTagIsCallback() In function you can get multiple checkbox value separated by comma.

here is working example: angular-multiple-value-selected-in-material

Hope this will help you!