Mat-autocomplete - How to access selected option?
If you need to get the whole OBJECT and use its children values in the component use this solution
https://stackoverflow.com/a/69652848/3944285
It can be done in two ways
- Using
onSelectionChange
which emitsMatOptionSelectionChange
frommat-option
<mat-autocomplete #auto="matAutocomplete">
<mat-option
*ngFor="let option of options"
[value]="option"
(onSelectionChange)="updateMySelection($event)"
>
{{ option }}
</mat-option>
</mat-autocomplete>
- Using
optionSelected
which emitsMatAutocompleteSelectedEvent
frommat-autocomplete
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)="updateMySelection($event)">
<mat-option
*ngFor="let option of options"
[value]="option"
>
{{ option }}
</mat-option>
</mat-autocomplete>
<mat-form-field floatLabel="always">
<mat-label>UTBMS Activity Codes</mat-label>
<input type="text" placeholder="Activity Codes" [(ngModel)]="activityCode" aria-label="Number" matInput [formControl]="utbmsActivityCodesControl"
[matAutocomplete]="autoActivityCodes">
<mat-autocomplete autoActiveFirstOption #autoActivityCodes="matAutocomplete">
<mat-option *ngFor="let option of utbmsActivityCodes | async" (onSelectionChange)="setBillingActivity(option)" [value]="option.code">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
setBillingActivity(object){
this.actionData.libraryContent.billingActivityId=object.activityId;
}
You can use it like :
<mat-autocomplete #auto="matAutocomplete" (optionSelected)='getPosts($event.option.value)'>
WORKING DEMO