2

The Angular Material documentation indicates that certain default options may be overridden using an "Injection token":

Constants

MAT_AUTOCOMPLETE_DEFAULT_OPTIONS

Injection token to be used to override the default options for mat-autocomplete.

const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;

It looks to expose options for panel height, option height, and a few other things. However it is a little vague on how to implement. I've been referencing this SO answer and this guide and I feel I'm getting closer, but it still is not working. This is where I am presently: 

import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteDefaultOptions } from '@angular/material';

const appearance: MatAutocompleteDefaultOptions = {
  // here I would like to override `AUTOCOMPLETE_OPTION_HEIGHT` and `AUTOCOMPLETE_PANEL_HEIGHT`
};

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
  providers: [
    {
      provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
      useValue: appearance,
    },
  ],
export class SearchComponent { /* etc. */ }

The properties AUTOCOMPLETE_OPTION_HEIGHT and AUTOCOMPLETE_PANEL_HEIGHT do not seem to exist on MatAutocompleteDefaultOptions interface, so this must be incorrect.

The documentation specifies that "Injection Tokens" must be used, but neither the examples I've seen, nor the Material documentation itself resembles the Angular documentation on InjectionToken. Is putting it in the providers array in some way related to injection tokens? It is very vague.

Within their Constants section, many Material components indicate this type of behavior is attainable, so:

How can these Providers / Injection Tokens be used to modify default options?

1252748
  • 14,597
  • 32
  • 109
  • 229

1 Answers1

1

You can try by changing css styles for the panel. Look into this https://github.com/angular/components/issues/3810 for setting panel height. as MatAutocompleteDefaultOptions has only one property, I dont think you can change other properties.

and I see the parameters declared as constants, So you may try by changing css styles.

/** The height of each autocomplete option. */
export declare const AUTOCOMPLETE_OPTION_HEIGHT = 48;
/** The total height of the autocomplete panel. */
export declare const AUTOCOMPLETE_PANEL_HEIGHT = 256;

Hope this helps.

Allabakash
  • 1,969
  • 1
  • 9
  • 15