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, Nov 06 '20 at 02:04
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, Nov 07 '20 at 02:33

Johnny Beltran · Answer 1 · 2020-11-07T02:29:57.313

0

So, I just realized that those options display over a <div class="cdk-overlay-container">. I have no idea what the previous programmer did but it's not displaying over the website, it's displaying after it so it isn't visible.

EDIT: The angular.json file didn't have the angular material stylesheets. Problem solved

edited Nov 07 '20 at 02:29

answered Nov 06 '20 at 01:46

Johnny Beltran

701
2
8
22

score 0 · Answer 2 · answered Nov 06 '20 at 02:13

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.

score 0 · Answer 3 · answered Apr 25 '23 at 13:57

0

I had the same issues and i fixed it by importing the material module ( the module that keeps all the modules ) in the routing module also in my module (the one i'm working on )

answered Apr 25 '23 at 13:57

Don Delice Dushime

11
5

Angular Material simple mat-autocomplete not working

3 Answers3