Login/Register
Style not loaded in new window
Asked Answered
Solved angularwindowangular-cdk
C

3

6

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

Canso answered 7/7, 2019 at 8:21 Comment(2)
as angular is inlining all it styles and im not aware of any way to control of different rendering them I would suggest creating separate entry point to application that only serves content of what is required in popup window (copying inlined styles seems to be worse idea than that) – Lyophilize
unfortunately this doesn't work in Microsoft edge. – Helio
A
13

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));
});
Areopagus answered 9/7, 2019 at 15:27 Comment(5)
Not sure if it will always work as angular dynamically generates _ngcontent_xx attribute all the time. – Exposed
Angular only generates different CSS rule attributes when the page is reloaded. Here you are cloning styles dynamically generated by angular at every page load. – Areopagus
That is true, however, for a component that you are opening in new window it will have different attribute than what you have for your host component, right? – Exposed
@DipenShah, all instances of a component retains the same attribute no matter where and how many times the instance is mounted. Using that attribute CSS rules are generated only once (on page load) so that it applies to all instances of that component. – Areopagus
One thing this does not handle is <link> elements with relative URLs in href. For those you will need to modify the href to prepend location.origin and location.pathname of the main window. – Vinery
K
2

1) create one css file in assets folder that contain common css both for component and external window and give css file path in index.html or in angular.json so that component loads this css.

index.html

<script>document.write('<link href="/assets/css/appstyles.css?v=' + Date.now() + '" rel="stylesheet" />');</script>

assets/css/appstyles.css

.pin-bg {
    background: pink;
    width: 255px;
    height: 20px;
}

2) give css path for external window as:-

this.externalWindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="assets/css/appstyles.css"></head><body>');

window.component.ts

ngOnInit(){

// STEP 4: create an external window
 this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');
 this.externalWindow.document.write('<html><head><style type="text/css">.pin-bg { background: pink; width:255px; height: 20px;}</style></head><body>');
}

or,

ngOnInit(){
// STEP 4: create an external window
 this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');
 this.externalWindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="assets/css/appstyles.css"></head><body>');
  }

assets/css/appstyles.css

.pin-bg {
    background: pink;
    width: 255px;
    height: 20px;
}

Stackblitz link:- https://stackblitz.com/edit/angular-open-window-tbd3a4?file=src/app/window.component.ts

Kimbro answered 14/7, 2019 at 6:3 Comment(0)
W
0

Another option is to use inline styling: style="color:red;background-color:black;"

<window *ngIf="showPortal">
      <h2 style="color:red;background-color:black;">Hello world from amother window!!</h2>
      <div class="pin-bg">do you see pink ? do you?</div>
      <button (click)="this.showPortal = false">Close me!</button>
  </window>
Woody answered 15/7, 2019 at 7:48 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.