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

Author: adolgachev

src/dev-app/menu/menu-demo.html

@@ -3,7 +3,7 @@
     <p>You clicked on: {{ selected }}</p>
 
     <mat-toolbar>
-      <button matIconButton [matMenuTriggerFor]="menu" aria-label="Open basic menu">
+      <button matIconButton [matMenuTriggerFor]="menu" matMenuTriggerOverlayInlined aria-label="Open basic menu">
         <mat-icon>more_vert</mat-icon>
       </button>
     </mat-toolbar>

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

@@ -104,6 +104,11 @@ export abstract class MatMenuTriggerBase implements OnDestroy {
   /** Data that will be passed to the menu panel. */
   abstract menuData: any;
 
+  /**
+   * Whether to inline the overlay, instead of using the global overlay container.
+   */
+  protected _menuOverlayInlined: boolean;
+
   /** Whether focus should be restored when the menu is closed. */
   abstract restoreFocus: boolean;
 
@@ -367,6 +372,7 @@ export abstract class MatMenuTriggerBase implements OnDestroy {
       scrollStrategy: this._scrollStrategy(),
       direction: this._dir || 'ltr',
       disableAnimations: this._animationsDisabled,
+      insertOverlayAfter: this._menuOverlayInlined ? this._element : undefined,
     });
   }
 

src/material/menu/menu-trigger.ts

@@ -17,6 +17,7 @@ import {
   OnDestroy,
   Output,
   Renderer2,
+  booleanAttribute,
 } from '@angular/core';
 import {OverlayRef} from '@angular/cdk/overlay';
 import {Subscription} from 'rxjs';
@@ -67,6 +68,17 @@ export class MatMenuTrigger extends MatMenuTriggerBase implements AfterContentIn
   @Input('matMenuTriggerData')
   override menuData: any;
 
+  /**
+   * Whether to inline the overlay, instead of using the global overlay container.
+   */
+  @Input({alias: 'matMenuTriggerOverlayInlined', transform: booleanAttribute})
+  get menuOverlayInlined(): boolean {
+    return this._menuOverlayInlined;
+  }
+  set menuOverlayInlined(menuOverlayInlined: boolean) {
+    this._menuOverlayInlined = menuOverlayInlined;
+  }
+
   /**
    * Whether focus should be restored when the menu is closed.
    * Note that disabling this option can have accessibility implications