Angular material autocomplete not firing off onChange event?

Question

I have a basic autocomplete. A list of objects where I pull out the list of a a string property and want to filter and select on it. Any idea why everything works and I see the list of names. But when I type in the box the filter does not happen ?

            <mat-form-field>
                <input type="text" placeholder="Filter by Last Name" [formControl]="fcOnBehalfLastName" matInput
                    [matAutocomplete]="auto">
                    <mat-autocomplete #auto="matAutocomplete">
                        <mat-option *ngFor="let eln of allEmployeesLastNames" [value]="eln">
                          {{eln}}
                       </mat-option>
                   </mat-autocomplete>
            </mat-form-field>


  fcOnBehalfLastName = new FormControl();
  filteredLastNames: Observable<any>;
  allEmployeesLastNames: string[];

  constructor(private fb: FormBuilder) {
    console.log('-----OrderStep1xComponent');
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.allEmployeesLastNames.filter(eln => eln.toLowerCase().includes(filterValue));
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.allEmployees && changes.allEmployees.currentValue) {
      this.allEmployeesLastNames = this.allEmployees.map(o => o.lastName);
    }
  }

  ngOnInit(): void {
    this.employeeFilter = new Employee();

    this.filteredLastNames = this.fcOnBehalfLastName.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );

Does this answer your question? [Angular5 - How to detect empty or deleted field in mat-autocomplete?](https://stackoverflow.com/questions/49929442/angular5-how-to-detect-empty-or-deleted-field-in-mat-autocomplete) — AlignedDev, Jan 04 '22 at 20:30

score 1 · Accepted Answer · answered Jan 04 '22 at 20:29

1

Aakash Verma has a good answer in another question: https://stackoverflow.com/a/49930012/54288

use the (change) event on the input to detect the change.

answered Jan 04 '22 at 20:29

AlignedDev

8,102
9
56
91

Angular material autocomplete not firing off onChange event?

1 Answers1