angularangular-materialautocompletemat-autocompletemat-option

mat-autocomplete not showing options Angular


I'm trying to implement material autocompleter in my Angular 8 application, but options are not being displayed.

As you can see, I've already tried applying z-index: 9999 as advised in Angular mat-autocomplete not showing options

enter image description here

And options are present in filteredData: Observable<string[]>;

HTML looks like this:

<div class="col-md-offset-6 col-md-6 col-lg-offset-6 col-lg-6 col-xs-offset-6 col-xs-6 col-sm-offset-6 col-sm-6 ">
    <mat-form-field class="full-width search-header-input">
        <input matInput [formControl]="myControl" placeholder="{{ 'search-text' | translate }}" [matAutocomplete]="auto">
        <mat-autocomplete style="z-index: 9999 !important; position: relative" autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onSelected($event)">
            <mat-option *ngFor="let item of filteredData | async" [value]="item">
                {{ item }}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</div>

I'm logging the result of the API call used to fill filteredData and it does have it:

ngOnInit() {
        this.filteredData = this.strABuscar.valueChanges.pipe(
            startWith(''),
            tap(value => console.log('Input value:', value)),
            switchMap(value => this.customData ? this.customData.searchWithReturn(value) : []),
            tap(options => {
                console.log('Filtered options:', options);
                //this.cdr.detectChanges();
                this.cdr.markForCheck();
            })
        );
    }

enter image description here

I've also added a span and it seems like data is ok:

<span *ngFor="let item of filteredData | async">{{item}}

enter image description here

Can someone pinpoint the issue?

Thanks in advance


Solution

  • Turns out that in order for it to work, you first need to add @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to your styles.css and then if needed style the input over the default styles.