Wednesday 30 December 2020

Angular - child component in new window has very odd behavior

I am using Angular's DomPortalHost to open a child component in a new browser window. It works for the most part.

Here is a working prototype of opening a child component in a new browser window:

https://stackblitz.com/edit/portalfun

I am able to pass data to and from child component - works great right?

Well.. when I have let's say, a map in the new browser window some of the map events seem to think the map exists in the original browser window. See:

https://www.youtube.com/watch?v=0387htqmXZw

Hilarity ensues:

I am able to click once in the new window to begin a selection (circle, etc) but not a second time. Using the view +/- controls seems to work fine. However, the map navigation/scrolling and the selection events think they are controlled from the original window.

The endgame for this little innovation project was to pass whatever data was selected in the map (syncing the grid you see in the background and the map). This works fine when I don't use DomPortalHost (that area below the grid is where the map was originally and it functions correctly).

I think that because *cdkPortal (see the stackblitz) is technically inside the original browser window:

      <window *ngIf="showPortal" [dataFromParent]="dataToPass" (dataToParent)="this.onClosed($event)">
      </window>
selector: 'window'...
    <ng-container *cdkPortal>
      <h1>Child component window</h1>
      <div></div>
      <a class="btn-3" (click)="emitClose()">Close Window</a>
      You can also close the parent window, or navigate to a different route. It will close the child window component.
    </ng-container>

It's as if the map think's its been rendered in the original window, but is actually rendered in the new window.

The closest.. discovery that i've had was that some of the event handling has a [[Scope]] property set to the original window - not the new on. However I don't see how to overwrite this property.

If anyone has any ideas, resources, or a better approach please feel free to let me know. This is part of an innovation sprint, but it'd be cool to get it working as i'm sure it has a lot of use cases for others out there.

Imagine opening child components and passing data back and forth in new windows.. and not having to run a second cloned app or deal with the overheard of state management :)



from Angular - child component in new window has very odd behavior

No comments:

Post a Comment