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
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();
})
);
}
I've also added a span and it seems like data is ok:
<span *ngFor="let item of filteredData | async">{{item}}
Can someone pinpoint the issue?
Thanks in advance
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.