How to add a global default panelClass to angular material select?

user_1055015 0
Viewed 795

I need to change the mat-select's dropdown's position slightly , currently I have to add a class to panelClass option for every mat-select instance ...

Is there any way to add this class globally?

I tried using MAT_SELECT_CONFIG but it only has 2 props

export interface MatSelectConfig {
    /** Whether option centering should be disabled. */
    disableOptionCentering?: boolean;
    /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */
    typeaheadDebounceInterval?: number;
}
angular-material angular
3 Answers

No ways, Here is a workaround

import {Directive, OnInit, Inject} from '@angular/core';
import {MatSelect} from '@angular/material/select';

@Directive({
  selector: 'mat-select'
})
export class CustomSelectDirective implements OnInit {

  constructor(@Inject(MatSelect) private select: MatSelect) {
  }

  ngOnInit() {
    this.select.panelClass = 'your class';
  }
}

Here is the demo

user_30906850

globally you can set it with:

providers: [
    {
      provide: MAT_SELECT_CONFIG,
      useValue: { overlayPanelClass: 'customClass' }
    }
  ],

MAT_SELECT_CONFIG has such property

/** Object that can be used to configure the default options for the select module. */
export interface MatSelectConfig {
  /** Whether option centering should be disabled. */
  disableOptionCentering?: boolean;

  /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */
  typeaheadDebounceInterval?: number;

  /** Class or list of classes to be applied to the menu's overlay panel. */
  overlayPanelClass?: string | string[];
}
user_132376680

You need to add ::ng-deep styling for select in styles.scss.

Admin1
Related