[Fixed] Angular: open component in a new window without ability to change URL and html head is the same as in the main app html

Issue

I have to create a feature that is opening a ‘popup’ with "how-to" videos. I said popup because client wants to have it moveable (for example move it to another display). So basically I can’t use any of material components because they work only for browser window. So I’ve prepared a component that gives me ability to open anything I want in another window.

@Component({
  selector: 'app-window',
  templateUrl: './window.component.html',
  styleUrls: ['./window.component.scss']
})
export class WindowComponent implements OnDestroy {
  @ViewChild(CdkPortal, {static: false}) portal: CdkPortal;
  @Output() windowClosed: EventEmitter<any> = new EventEmitter<any>();

  private externalWindow = null;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private applicationRef: ApplicationRef,
    private injector: Injector) {
  }

  ngOnDestroy() {
    this.windowClosed.emit();
    this.externalWindow.close();
  }

  openWindow() {
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');

    const host = new DomPortalHost(
      this.externalWindow.document.body,
      this.componentFactoryResolver,
      this.applicationRef,
      this.injector
    );

    host.attach(this.portal);
  }
}

Template:

<ng-container *cdkPortal>
  <ng-content></ng-content>
</ng-container>

And it works but the head of html opened in the window is empty, so I don’t have any of styles that I’m using in my application. What I want to achieve is to have there at least material styles, but I preferred to have everything that I have in my application.

This is the stackblitz example if someone want to see how it works:
https://stackblitz.com/edit/angular-open-window-bvenwh

Solution

The best way is, create a route for your pop-up window
and do like this

in route.module.ts

[{
  path: 'new-tab', component: NewTabComponnet
}}

in component.ts

 openInNewTab()  {
     window.open(`${window.location.origin}/new-tab/`);
    }