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

  1. Using onSelectionChange which emits MatOptionSelectionChange from mat-option
<mat-autocomplete #auto="matAutocomplete">
    <mat-option
      *ngFor="let option of options"
      [value]="option"
      (onSelectionChange)="updateMySelection($event)"
    >
      {{ option }}
    </mat-option>
</mat-autocomplete>
  1. Using optionSelected which emits MatAutocompleteSelectedEvent from mat-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

Tags:

Angular