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?