feat(cdk/menu): add option to enable inlined overlay

Author: adolgachev

src/cdk/menu/menu-trigger-base.ts

@@ -90,6 +90,11 @@ export abstract class CdkMenuTriggerBase implements OnDestroy {
    */
   menuPosition: ConnectedPosition[];
 
+  /**
+   * Whether to inline the overlay, instead of using the global overlay container.
+   */
+  menuOverlayInlined: boolean;
+
   /** Emits when the attached menu is requested to open */
   readonly opened: EventEmitter<void> = new EventEmitter();
 

src/cdk/menu/menu-trigger.ts

@@ -17,6 +17,7 @@ import {
   OnDestroy,
   Renderer2,
   SimpleChanges,
+  booleanAttribute,
 } from '@angular/core';
 import {InputModalityDetector} from '../a11y';
 import {Directionality} from '../bidi';
@@ -68,6 +69,7 @@ import {eventDispatchesNativeClick} from './event-detection';
   inputs: [
     {name: 'menuTemplateRef', alias: 'cdkMenuTriggerFor'},
     {name: 'menuPosition', alias: 'cdkMenuPosition'},
+    {name: 'menuOverlayInlined', alias: 'cdkMenuOverlayInlined', transform: booleanAttribute},
     {name: 'menuData', alias: 'cdkMenuTriggerData'},
   ],
   outputs: ['opened: cdkMenuOpened', 'closed: cdkMenuClosed'],
@@ -276,6 +278,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
       positionStrategy: this._getOverlayPositionStrategy(),
       scrollStrategy: this.menuScrollStrategy(),
       direction: this._directionality || undefined,
+      insertOverlayAfter: this.menuOverlayInlined ? this._elementRef : undefined,
     });
   }
 

src/components-examples/cdk/menu/cdk-menu-standalone-menu/cdk-menu-standalone-menu-example.html

@@ -1,5 +1,5 @@
 <!-- #docregion trigger -->
-<button [cdkMenuTriggerFor]="menu" class="example-standalone-trigger">Click me!</button>
+<button [cdkMenuTriggerFor]="menu" cdkMenuOverlayInlined class="example-standalone-trigger">Click me!</button>
 <!-- #enddocregion trigger -->
 
 <ng-template #menu>