Angular autocomplete on select get all object of selected value

Question

I have an autocomplete component.

I passe an array of object.

I would like that when I select an option I get all item informations (option) not just the field value (option.name)

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
            [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)='selectOption($event.option)'>
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                {{option.name}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
    <router-outlet></router-outlet>
</form>

Component ts

export class SearchLeagueComponent implements OnInit {
  constructor(private searchLeagueService: SearchLeagueService) { }
  myControl = new FormControl();
  options: ILeague[] = [
    {
      _id: '',
      teams: [],
      name: '',
      sport: ''
    }
  ];
  filteredOptions: Observable<ILeague[]> | undefined

  ngOnInit() {
    this.searchLeagueService.getLeaguesList().toPromise().then(data => this.options = data)
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        //startWith(''),
        map((value: string) => this._filter(value))
      );
  }
  selectOption(val: string) {
    console.log(val)
  }
  private _filter(value: string): ILeague[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
  }
}

Actually I'm using (optionSelected) but it only return selected value.

I should get also the id.

Answer 1

I think your issue is very relate to my current development issue. which I have solve using below ways:

Html

<mat-autocomplete #auto="matAutocomplete" (optionSelected)='selectOption($event.option,$event.option._element.nativeElement.OptionValue)'>
    <mat-option [OptionValue]="option" *ngFor="let option of filteredOptions | async" [value]="option.name">
        {{option.name}}
    </mat-option>
</mat-autocomplete>

.ts File

selectOption(val: string,option:any) {
  console.log(val);
  console.log("option : ",option);
}

Hope it help you.

Here in this example I have fill current option value inside custom attribute(OptionValue). Once event fire then that attribute value pass as an argument of 'selectOption()' function.

Answer 2

Try to use itemDispalayFn function to display options

    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
            [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)='selectOption($event)'
            [displayWith]="itemDisplayFn">
            <mat-option *ngFor="let option of filteredOptions | async" 
            [value]="option.name">
                {{option.name}}
            </mat-option>
        </mat-autocomplete>

  itemDisplayFn(item: YOUR INTERFACE) {
        return item? item.name: '';
    }

Answer 3

You should pass the ($event) to selectOption().

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
            [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)='selectOption($event)'>
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                {{option.name}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
    <router-outlet></router-outlet>
</form>

then get your object in selectOption() like this

import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';


  selectOption(e: MatAutocompleteSelectedEvent) {
     const item: **YOUR INTERFACE** = e.option.value;
     console.log(item);
  }