feat(menu): add injection token for overriding the default options

Adds a new injection token that allows the consumer to override the default values for the `xPosition`, `yPosition` and `overlapTrigger` options.

Fixes #5479.

Author: crisbeto

src/lib/menu/index.ts

@@ -9,7 +9,7 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {OverlayModule, MdCommonModule} from '../core';
-import {MdMenu} from './menu-directive';
+import {MdMenu, MD_MENU_DEFAULT_OPTIONS} from './menu-directive';
 import {MdMenuItem} from './menu-item';
 import {MdMenuTrigger} from './menu-trigger';
 import {MdRippleModule} from '../core/ripple/index';
@@ -24,6 +24,14 @@ import {MdRippleModule} from '../core/ripple/index';
   ],
   exports: [MdMenu, MdMenuItem, MdMenuTrigger, MdCommonModule],
   declarations: [MdMenu, MdMenuItem, MdMenuTrigger],
+  providers: [{
+    provide: MD_MENU_DEFAULT_OPTIONS,
+    useValue: {
+      overlapTrigger: true,
+      xPosition: 'after',
+      yPosition: 'below',
+    },
+  }],
 })
 export class MdMenuModule {}
 

src/lib/menu/menu-directive.ts

@@ -19,6 +19,8 @@ import {
   ViewChild,
   ViewEncapsulation,
   ElementRef,
+  InjectionToken,
+  Inject,
 } from '@angular/core';
 import {MenuPositionX, MenuPositionY} from './menu-positions';
 import {throwMdMenuInvalidPositionX, throwMdMenuInvalidPositionY} from './menu-errors';
@@ -29,6 +31,16 @@ import {Subscription} from 'rxjs/Subscription';
 import {transformMenu, fadeInItems} from './menu-animations';
 import {ESCAPE} from '../core/keyboard/keycodes';
 
+/** Default `md-menu` options that can be overriden. */
+export interface MdMenuDefaultOptions {
+  xPosition: MenuPositionX;
+  yPosition: MenuPositionY;
+  overlapTrigger: boolean;
+}
+
+/** Injection token to be used to override the default options for `md-menu`. */
+export const MD_MENU_DEFAULT_OPTIONS =
+    new InjectionToken<MdMenuDefaultOptions>('md-menu-default-options');
 
 @Component({
   moduleId: module.id,
@@ -44,8 +56,8 @@ import {ESCAPE} from '../core/keyboard/keycodes';
 })
 export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
   private _keyManager: FocusKeyManager;
-  private _xPosition: MenuPositionX = 'after';
-  private _yPosition: MenuPositionY = 'below';
+  private _xPosition: MenuPositionX = this._defaultOptions.xPosition;
+  private _yPosition: MenuPositionY = this._defaultOptions.yPosition;
 
   /** Subscription to tab events on the menu panel */
   private _tabSubscription: Subscription;
@@ -81,7 +93,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
   @ContentChildren(MdMenuItem) items: QueryList<MdMenuItem>;
 
   /** Whether the menu should overlap its trigger. */
-  @Input() overlapTrigger = true;
+  @Input() overlapTrigger = this._defaultOptions.overlapTrigger;
 
   /**
    * This method takes classes set on the host md-menu element and applies them on the
@@ -105,7 +117,9 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
   /** Event emitted when the menu is closed. */
   @Output() close = new EventEmitter<void>();
 
-  constructor(private _elementRef: ElementRef) { }
+  constructor(
+    private _elementRef: ElementRef,
+    @Inject(MD_MENU_DEFAULT_OPTIONS) private _defaultOptions: MdMenuDefaultOptions) { }
 
   ngAfterContentInit() {
     this._keyManager = new FocusKeyManager(this.items).withWrap();

src/lib/menu/menu.spec.ts

@@ -15,7 +15,9 @@ import {
   MdMenuTrigger,
   MdMenuPanel,
   MenuPositionX,
-  MenuPositionY
+  MenuPositionY,
+  MdMenu,
+  MD_MENU_DEFAULT_OPTIONS,
 } from './index';
 import {OverlayContainer} from '../core/overlay/overlay-container';
 import {Directionality, Direction} from '../core/bidi/index';
@@ -487,6 +489,29 @@ describe('MdMenu', () => {
   });
 });
 
+describe('MdMenu default overrides', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdMenuModule, NoopAnimationsModule],
+      declarations: [SimpleMenu],
+      providers: [{
+        provide: MD_MENU_DEFAULT_OPTIONS,
+        useValue: {overlapTrigger: false, xPosition: 'before', yPosition: 'above'},
+      }],
+    }).compileComponents();
+  }));
+
+  it('should allow for the default menu options to be overriden', () => {
+    const fixture = TestBed.createComponent(SimpleMenu);
+    fixture.detectChanges();
+    const menu = fixture.componentInstance.menu;
+
+    expect(menu.overlapTrigger).toBe(false);
+    expect(menu.xPosition).toBe('before');
+    expect(menu.yPosition).toBe('above');
+  });
+});
+
 @Component({
   template: `
     <button [mdMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
@@ -499,6 +524,7 @@ describe('MdMenu', () => {
 class SimpleMenu {
   @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
   @ViewChild('triggerEl') triggerEl: ElementRef;
+  @ViewChild('menu') menu: MdMenu;
   closeCallback = jasmine.createSpy('menu closed callback');
 }
 

src/lib/menu/menu.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export {MdMenu} from './menu-directive';
+export {MdMenu, MdMenuDefaultOptions, MD_MENU_DEFAULT_OPTIONS} from './menu-directive';
 export {MdMenuItem} from './menu-item';
 export {MdMenuTrigger} from './menu-trigger';
 export {MdMenuPanel} from './menu-panel';