Why is onSelectionChange called twice?

Issue

I am using Angular Material Autocomplete as follows:

<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="displayFn" autoActiveFirstOption>
  <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option" (onSelectionChange)="onSelectionChanged(option)" >
    {{displayFn(option)}}
  </mat-option>
</mat-autocomplete>    

This is the handler:

onSelectionChanged(option) {
  console.log('Selected ' + option.name);
}

For some reason onSelectionChanged() gets called twice. The second time with the old value! I don't get why. What is happenning here?

Selecting item 1 and then item 2 and then item 3 will print:

> Selected item 1
> Selected item 2
> Selected item 1  // The unwanted call with the old value
> Selected item 3
> Selected item 2  // The unwanted call with the old value

Solution

material has optionSelected event you can use it

<mat-autocomplete #autocomplete="matAutocomplete" (optionSelected)="onSelectionChanged($event)" [displayWith]="displayFn" autoActiveFirstOption>
 <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option" >
    {{displayFn(option)}}
 </mat-option>
</mat-autocomplete>  

and get your value that way

onSelectionChanged(event) {
   console.log(event.option.value);
}

Answered By - Fateh Mohamed