Save on (focusout) with angular mat-autocomplete

Question

I have a simple input with autocomplete

   <         


        

Answer 1

If you ONLY want to handle the clicking on autocomplete option you should use (click) on that option to handle it.

<input [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option (click)="save(number)" *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

However, if you want to do it with focus, this will work:

<input #myInput (focusout)="save(myInput.value)" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

Stackblitz