Angular Material simple mat-autocomplete not working

Question

I've spent over 3 days on this issue and I don't know what to do anymore. I tried to set up a minimal working example in stackblitz but there it works perfectly.

I have a simple mat-autocomplete inside a reactive form, code straight out of the documentation:

<mat-form-field class="w-100">
   <input type="text"
                matInput
                [formControl]="clientControl"
                [matAutocomplete]="auto">

    <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let c of testClients" [value]="c">{{ c }}</mat-option>

    </mat-autocomplete>
</mat-form-field>

Options are not showing at all when I click. When I inspect the code, there are not mat-options inside the mat-autocomplete. I even tried to put a bunch of mat-option tags (without the ngFor) and still they aren't showing, so the ngFor is not the problem.

can you add your ts file and your module file of this component. — Arunkumar Ramasamy
Figured it out. Whoever created this project did so by making a copy of an existing one and forgot to include the angular material stylesheets — Johnny Beltran

Kavinda Senarathne Kavinda Senarathne · Accepted Answer · 2020-11-06T02:13:11

You are missing a filter method in your .ts

You have to subscribe to your clientControl valueChanges this way:

this.clientControl.valueChanges.subscribe(newValue=>{
    this.filteredClients = this.filterClients(newValue);
})

So everytime your form control value changes you call your custom filterValues() method, that should look like:

filterClients(search: string) {
    return this.testClients.filter(value=>
    value.toLowerCase().indexOf(search.toLowerCase()) === 0);
}

So you use your testClients array as a base array, and your filteredClients array in your html:

<mat-option *ngFor="let n of filteredClients" [value]="c">
    {{c}}
</mat-option>

Filtering is not automatic, you have to use your custom method to filter the options.

Angular Material simple mat-autocomplete not working

2 Answers