Search code examples
angularwindowangular-cdk

Style not loaded in new window

I reproduced the problem with minimal code on this Stackblitz .

I made part of my component open on a new window BUT it should still be able to interact with my main app. I used DomPortalHost to achieve that. The interaction works successfully but the style are not loaded into the new window.

How do I force the new window to match the style of the main app?

The main app

enter image description here

The window:

enter image description here

Solution

  • Your modal window does not contain the CSS styles of the parent window. So you have to clone them yourself to new window as cdk portal is not supposed to do that.

    Add the following step in your ngOnInit method:

    // STEP 5.1: clone stylesheets and style tags to external window
document.querySelectorAll('link, style').forEach(htmlElement => {
  this.externalWindow.document.head.appendChild(htmlElement.cloneNode(true));
});