Angular material Autocomplete: select option

Source: https://stackoverflow.com/questions/42427928/material-2-autocomplete-select-option

The Material Autocomplete component has its own optionSelected event output:

Template:

<mat-autocomplete (optionSelected)="onSelectionChanged($event)"> 
  <mat-option *ngFor="let item of myItems" [value]="item">
    {{ item }}
  </mat-option>
</mat-autocomplete>

Controller:

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

// ...

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

See: Angular Material API Docs - MatAutocomplete

how to show autocomplete options on focus

Source: https://stackoverflow.com/questions/52536382/how-to-show-autocomplete-options-on-focus

the filter is executed when the page loads.. but I loaded the data on graphql so the data arrived after the first filter executed. I changed it so the filter will be executed only after the data was received.

thanks Swoox for helping me notice it.

ngOnInit() {
 ...
 this.carsService.GetCarCompanies().subscribe((data: any) => {
      this.carCompanies = [];
      this.carCompaniesLowercase = [];
      data.data.car_companies.forEach((row) => {
        this.carCompanies.push(row.company_name);
        this.carCompaniesLowercase.push(row.company_name.toLowerCase());
      });
      this.filteredCarCompanies = this.carTypeFormGroup.get('carCompany').valueChanges
        .pipe(startWith(''), map(carCompany => carCompany ? this._filterCarCompanies(carCompany) : this.carCompanies.slice()));
    });