components bug(OverlayContainer, MatDialog): MatDialog not rendering inside custom OverlayContainer in angular 15

In Angular 15, if a component is provided with OverlayContainer and overridden to use it as a custom container element, individual overlay elements are not rendering inside the container (), instead is appended to the document body(default behavior).

export class OverlayService extends OverlayContainer{
    constructor(
      @Inject(DOCUMENT) _document: any,
      platform: Platform,
      private problem: ElementRef<HTMLElement>
    ) {
      super(_document, platform);
    }

    protected override _createContainer(): void {
      const containerClass = "cdk-overlay-container";
      const container = this._document.createElement("div");
      container.classList.add(containerClass);

      this.problem.nativeElement.appendChild(container);
      this._containerElement = container;
    }

}

@Component({
  selector: 'app-problem',
  templateUrl: './problem.component.html',
  styleUrls: ['./problem.component.css'],
  providers: [
    DialogServiceService,
    MatDialog,
    { provide: OverlayContainer, useClass: OverlayService },
  ]
})

Expected behavior:

<body>
 <app-problem>
   <div>....</div>
   <div class="cdk-overlay-container">
      <mat-dialog-container></mat-dialog-container>
   </div>
 </app-problem>
</body>

I was expecting the MatDialog to render inside the custom container as in previous angular versions.

What troubleshooting steps have you tried?

Current behavior(Angular 15):

<body>
  <app-problem></app-problem>
</body>
<div class="cdk-overlay-container">
  <mat-dialog-container></mat-dialog-container>
</div>

Reproduction

https://stackblitz.com/edit/angular-pfwikb?file=src%2Fapp%2Fproblem%2Fproblem.component.ts

Environment

Angular: 15
CDK/Material: 15.1.2
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Mac

Feb 01 '23 12:02 lijojoy123

I'm having the same problem with angular 15.

Feb 05 '23 01:02 yosdanybm

have we resolved this issue or we have any workaround for this issue?

Jul 26 '23 08:07 danishOneAdvanced

I think i found some kind of a workaround, its only possible to add your OverlayService provider in the app module (highest level) So it's not working in lazy loaded modules or in components,

the only problem you are probably facign now is the fact that alle overlays are rendered inside the DOM element you've defined in your OverlayService

Nov 15 '23 16:11 richardsengers

Same issue with the Overlay and OverlayRef component which is probably the root of the problem. (I didn't test but it seems Dialog is using the OverlayContainer defined in Overlay, not the one injected in Dialog).

Overlay is injected in root and it use the OverlayContainer defined at the same level.

If you define an new provider for a custom OverlayContainer at component/submodule scope, it won't be used in the Overlay because it's already injected and has its own OverlayContainer (which is global to the whole app).

A hack is to provide a custom Overlay where you can inject your custom OverlayContainer (it works).

The fix is probably to add to an OverlayContainer parameter to OverlayConfig.

Nov 22 '23 09:11 noguespi

Same problem for all ng versions starting from v15. Custom overlayContainer prop have been deprecated from that version - https://github.com/angular/components/blob/f23d8c1f7e828cc1d4d9d08cd6117507f979fcb5/src/material/dialog/dialog.ts#L129

Dec 12 '23 11:12 lacastorine