pop element from array on selectionchange()

Question

i am using angular. i have a multiple select (mat select) and i want to send the selected values in array i try to use selectionchange and get the value and push it in array but after that if i unselect an option that dosent pop from the array instead a value added in my array.i want if i unselect any element no new element inserted in that array

thanks in advance

<mat-form-field>
  <mat-select  (selectionChange)="change($event)" multiple >
    <mat-option *ngFor="let i of user" [value]="i">
      {{ i.name }}
    </mat-option>
  </mat-select>
</mat-form-field>


  change(event) {
    console.log(event);
    this.e=event.value
    console.log('ttttt',this.e)
    for(var i=0;i<this.e.length;i++)
    {
      var local=this.e[i].value;
    }
  this.arr.push(local);
  console.log('arr',this.arr)
  }

Answer 1

You can use onSelectionChange event on mat-option like below

<mat-form-field>
    <mat-select multiple>
            <mat-option (onSelectionChange)="change($event)" *ngFor="let i of user" [value]="i">
                {{ i.name }}
    </mat-option>
</mat-select>

  change(event) {
    if (event.source.selected) this.arr.push(event.source.value);
    else {
      const index = this.arr.indexOf(event.source.value);
      if (index > -1) {
        this.arr.splice(index, 1);
      }
    }
    console.log("arr", this.arr);
  }