feat(select): add injection token for configuring default opti… (#17543)

Adds the `MAT_SELECT_CONFIG` injection token that consumers can use to customize the default options for the `mat-select` component.

Fixes #17406.

Author: crisbeto

src/material/select/select.spec.ts

@@ -29,6 +29,7 @@ import {
   QueryList,
   ViewChild,
   ViewChildren,
+  Provider,
 } from '@angular/core';
 import {
   async,
@@ -63,7 +64,7 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
 import {Subject, Subscription, EMPTY, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {MatSelectModule} from './index';
-import {MatSelect} from './select';
+import {MatSelect, MAT_SELECT_CONFIG, MatSelectConfig} from './select';
 import {
   getMatSelectDynamicMultipleError,
   getMatSelectNonArrayValueError,
@@ -88,7 +89,7 @@ describe('MatSelect', () => {
    * overall test time.
    * @param declarations Components to declare for this block
    */
-  function configureMatSelectTestingModule(declarations: any[]) {
+  function configureMatSelectTestingModule(declarations: any[], providers: Provider[] = []) {
     TestBed.configureTestingModule({
       imports: [
         MatFormFieldModule,
@@ -105,6 +106,7 @@ describe('MatSelect', () => {
             scrolled: () => scrolledSubject.asObservable(),
           }),
         },
+        ...providers
       ],
     }).compileComponents();
 
@@ -4447,6 +4449,22 @@ describe('MatSelect', () => {
     }));
 
   });
+
+  it('should be able to provide default values through an injection token', () => {
+    configureMatSelectTestingModule([NgModelSelect], [{
+      provide: MAT_SELECT_CONFIG,
+      useValue: {
+        disableOptionCentering: true,
+        typeaheadDebounceInterval: 1337
+      } as MatSelectConfig
+    }]);
+    const fixture = TestBed.createComponent(NgModelSelect);
+    fixture.detectChanges();
+    const select = fixture.componentInstance.select;
+
+    expect(select.disableOptionCentering).toBe(true);
+    expect(select.typeaheadDebounceInterval).toBe(1337);
+  });
 });
 
 

src/material/select/select.ts

@@ -151,6 +151,18 @@ export function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):
   return () => overlay.scrollStrategies.reposition();
 }
 
+/** 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;
+}
+
+/** Injection token that can be used to provide the default options the select module. */
+export const MAT_SELECT_CONFIG = new InjectionToken<MatSelectConfig>('MAT_SELECT_CONFIG');
+
 /** @docs-private */
 export const MAT_SELECT_SCROLL_STRATEGY_PROVIDER = {
   provide: MAT_SELECT_SCROLL_STRATEGY,
@@ -507,7 +519,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     @Self() @Optional() public ngControl: NgControl,
     @Attribute('tabindex') tabIndex: string,
     @Inject(MAT_SELECT_SCROLL_STRATEGY) scrollStrategyFactory: any,
-    private _liveAnnouncer: LiveAnnouncer) {
+    private _liveAnnouncer: LiveAnnouncer,
+    @Optional() @Inject(MAT_SELECT_CONFIG) defaults?: MatSelectConfig) {
     super(elementRef, _defaultErrorStateMatcher, _parentForm,
           _parentFormGroup, ngControl);
 
@@ -523,6 +536,16 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
 
     // Force setter to be called in case id was not specified.
     this.id = this.id;
+
+    if (defaults) {
+      if (defaults.disableOptionCentering != null) {
+        this.disableOptionCentering = defaults.disableOptionCentering;
+      }
+
+      if (defaults.typeaheadDebounceInterval != null) {
+        this.typeaheadDebounceInterval = defaults.typeaheadDebounceInterval;
+      }
+    }
   }
 
   ngOnInit() {

tools/public_api_guard/material/select.d.ts

@@ -1,3 +1,5 @@
+export declare const MAT_SELECT_CONFIG: InjectionToken<MatSelectConfig>;
+
 export declare const MAT_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 
 export declare const MAT_SELECT_SCROLL_STRATEGY_PROVIDER: {
@@ -57,7 +59,7 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     typeaheadDebounceInterval: number;
     value: any;
     readonly valueChange: EventEmitter<any>;
-    constructor(_viewportRuler: ViewportRuler, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _parentFormField: MatFormField, ngControl: NgControl, tabIndex: string, scrollStrategyFactory: any, _liveAnnouncer: LiveAnnouncer);
+    constructor(_viewportRuler: ViewportRuler, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _parentFormField: MatFormField, ngControl: NgControl, tabIndex: string, scrollStrategyFactory: any, _liveAnnouncer: LiveAnnouncer, defaults?: MatSelectConfig);
     _calculateOverlayScroll(selectedIndex: number, scrollBuffer: number, maxScroll: number): number;
     _getAriaActiveDescendant(): string | null;
     _getAriaLabel(): string | null;
@@ -106,6 +108,11 @@ export declare class MatSelectChange {
     value: any);
 }
 
+export interface MatSelectConfig {
+    disableOptionCentering?: boolean;
+    typeaheadDebounceInterval?: number;
+}
+
 export declare class MatSelectModule {
     static ɵinj: i0.ɵɵInjectorDef<MatSelectModule>;
     static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatSelectModule, [typeof i1.MatSelect, typeof i1.MatSelectTrigger], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.MatOptionModule, typeof i4.MatCommonModule], [typeof i5.MatFormFieldModule, typeof i1.MatSelect, typeof i1.MatSelectTrigger, typeof i4.MatOptionModule, typeof i4.MatCommonModule]>;