Retrieve selected option from autocomplete suggestions in textbox

Question

I have a textbox which has autocomplete enabled. Now, I want to retrieve selected option in the textbox from autocomplete suggestions and push it into another textbox. How can I code it in typescript? Is there any method for it?

Below is code for textbox having autocomplete suggestions :

<div class="form-group">
    <label>Primary Contact</label>
    <input type="text" placeholder="Enter" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
        </mat-autocomplete>
    </input>
</div>

Answer 1

mat-autocomplete has different events and in this case you are looking for:

@Output() optionSelected: EventEmitter<MatAutocompleteSelectedEvent>

So do:

<mat-autocomplete ... (optionSelected)="doSomething($event.option.value)">

With that you can assign the data you get in doSomething(), or do whatever you need to do.

STACKBLITZ

Answer 2

Use ngModel binding to myControl.

<div class="form-group">
    <label>Primary Contact</label>
    <input type="text" placeholder="Enter" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
        </mat-autocomplete>
    </input>
</div>
<input type="text" placeholder="displayTextbox" [(ngModel)]="myControl.value" >