Why is onSelectionChange called twice?

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);}

I was facing the same problem for a mat-option inside a mat-select and fixed this way:

Template

<mat-select> <mat-option (onSelectionChange)="handleMetaSignalChange(metaSignal.name,$event);" *ngFor="let metaSignal of metaSignals" [value]="metaSignal">  {{ metaSignal.name }} </mat-option></mat-select>

Code

 handleMetaSignalChange(metaSignal: string, event: any) {    if (event.isUserInput) {    // ignore on deselection of the previous option      console.log('Meta Signal Changed to ' + metaSignal + event.isUserInput);    } }

As noted in this issue, this is the expected behavior of onSelectionChanged. A selection change event is fired not only when an option is selected but also when it is deselected. So when an option is selected, the event fires on it, and also on any option that is deselected.

Try using optionSelected instead.