Angular CDK Overlay Container Not Working in a New (Popout) Window

Viewed 414

I am creating a popout window using DomPortalOutlet and attaching a ComponentPortal to the outlet allowing a component to display in a new window. See below:

this.externalWindow = window.open(
  '',
  '_blank', 'location=yes,height=' + height + ',width=' + width
);
const outlet = new DomPortalOutlet(
    this.externalWindow.document.body,
    this.componentFactoryResolver,
    this.applicationRef,
    this.injector,
    document
  );
const containerPortal = new ComponentPortal(myComponent);
  outlet.attach(containerPortal);

This works fine, the new window is created, the component display, services and dependencies are injected, etc. The problem is that overlays (mat-menu, mat-select, etc.) are displayed in the main window not in the new popout window. The cdk-overlay-container exists only in the main window and not the new popout window therefore all overlays are displaying in the main window. Somehow I need to create a second overlay container in the new popout windw so that overlays display in the correct window.

Any ideas? Suggestions?

0 Answers
Related