CODEWITHSUNDEEP
angular
CCSJ
CCSJ

Reputation: 853

Mat-autocomplete - How to access selected option?

I know that [value] stores the selected Object (Offer in my case). According to materials documentation, optionSelected emits an event. I tried [optionSelected] = "fooFn" but it doesn't exist. I just want to access the Offer object. Thanks!

offer-search.component.html:

  <h5 #offerP>option - autoComplete</h5>
  <mat-form-field id="form-field">
    <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">
        {{ option.foodItem.name }}
    </mat-option>
  </mat-autocomplete>
  </mat-form-field>

Upvotes: 71

Views: 140099

Answers (5)

Pallavi Verma
Pallavi Verma

Reputation: 1

Unfortunately (optionSelected) did not work for me, I used (onSelectionChange), here is a thing onSelectionChange will throws two events simultaneously one for selection another for deselection, hence last value comes out to be previously selected value. So, I did the following:

<h5 #offerP>option - autoComplete</h5>
  <mat-form-field id="form-field">
    <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete auto="matAutocomplete" [displayWith]="displayFn" (onSelectionChange)="populateForm($event);>
      <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">
        {{ option.foodItem.name }}
    </mat-option>
  </mat-autocomplete>
  </mat-form-field>

// TS

populateForm(event: MatAutocompleteSelectedEvent) {
   if(event.source["_selected"] === true){
      //your next set of action goes here
    }
}

Upvotes: 0

Miguel Peguero
Miguel Peguero

Reputation: 488

// html
 
<h5 #offerP>option - autoComplete</h5>
  <mat-form-field id="form-field">
    <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="populateForm($event);>
      <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">
        {{ option.foodItem.name }}
    </mat-option>
  </mat-autocomplete>
  </mat-form-field>

// TS

populateForm(event: MatAutocompleteSelectedEvent) {
    console.log(event.option.value);
}

Upvotes: 0

rainversion_3
rainversion_3

Reputation: 967

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>

Upvotes: 28

Rokive
Rokive

Reputation: 825

 <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;
  }

Upvotes: 6

Vivek Doshi
Vivek Doshi

Reputation: 58543

You can use it like :

<mat-autocomplete #auto="matAutocomplete" (optionSelected)='getPosts($event.option.value)'>

WORKING DEMO

Upvotes: 156

Related Questions