For quite some time now, I've been attempting to adjust the number of items in a mat-autocomplete without any luck. My project involves using material.angular.io
Below is a snippet of my code
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-add-and-search',
templateUrl: './add-and-search.component.html',
styleUrls: ['./add-and-search.component.css']
})
export class AddAndSearchComponent implements OnInit {
items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
constructor() { }
ngOnInit() {
}
}<mat-form-field appearance="standard">
<mat-label>Search...</mat-label>
<input matInput placeholder="Search..." [matAutocomplete]="auto">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete">
<mat-optgroup label="Items">
<mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
<mat-option><mat-icon>add</mat-icon>Add</mat-option>
</mat-optgroup>
</mat-autocomplete>After going through the documentation, I discovered that the autocomplete panel has a fixed height of 256px (https://material.angular.io/components/autocomplete/api#AUTOCOMPLETE_PANEL_HEIGHT).
Here's my query: How can I modify the autocomplete panel to display more items, say 10? In case there isn't a direct method for this, could someone provide me with a CSS workaround to adjust the height, maybe set it to 512px instead of the default 256px?
Thank you in advance!