Angular 2 Autocomplete to fetch value from selected option - angular5

Question

In angular material, autocomplete feature mat-option will have same entries on "value" field and text within.
<mat-form-field fxFlex="50">
<input type="text" placeholder="{{label.addUser.formLabels.role}}" matInput [matAutocomplete]="role" formControlName="roleId">
<mat-autocomplete #role="matAutocomplete" autoActiveFirstOption>
<mat-option *ngFor="let option of roleListFilter | async" value="{{option.roleId}}" >
<span>{{option.roleName}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
and I get the output as shown in the following question..
How can I get selected item value in Angular 2 Material Autocomplete
I want to display selected string in the text box and set roleId in value field at the same time.. Is this achievable?

Answer 1

Try below code:
<mat-form-field>
<input matInput placeholder="State" aria-label="State"
[matAutocomplete]="auto" [formControl]="your_ctrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option (click)="getSelectedElementId(item.id)" *ngFor="let item of your_list | async"
[value]="item.name">
<span>{{ item.name }}</span> |
</mat-option>
</mat-autocomplete>
</mat-form-field>
In .ts file:
getSelectedElementId(id){
console.log(id)
}