如何在 mat-autocomplete 中设置项目数

Question

I'm now trying to change the number of items in a mat-autocomplete for a while without success. I'm using material.angular.io

Here's 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>

From the docs I learned that the autocomplete panel has a constant height of 256px ( https://material.angular.io/components/autocomplete/api#AUTOCOMPLETE_PANEL_HEIGHT ).

My question is: How can I change the autocomplete panel to display more items. Let's say 10. If there is no intended way of doing this could someone give me a hint on a CSS trick to set the height eg to 512px instead of the default 256px?

Many thanks!

Answer 1

You can change the height of the autocomplete panel by overwriting the max-height like this:

::ng-deep .mat-autocomplete-panel {
 max-height: 512px !important; 
}

See it in action here .