CdkDragDrop in CdkPortal is not responding

Question

I am trying to use CdkDragDrop to reorder a list that is hosted in a CdkPortal window and it does not work.

HTML:

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

<hr />

<div cdkDropList class="example-list mt-20" 
 (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let movie of movies, index as i" 
     cdkDrag>
        <div class="drag-index" (click)="writelog(movie.name)">{{movie.name}} 
        </div>
    </div>
</div>

<p>{{movie | json}}</p>

Typescript:

import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  styleUrls: ["./app.component.css"],
  templateUrl: "./app.component.html"
 })
 export class AppComponent {
  showPortal = false;

  movies = [
  {
  name: "Episode I - The Phantom Menace",
  isDisable: false
  },
{
  name: "Episode II - Attack of the Clones",
  isDisable: false
},
{
  name: "Episode III - Revenge of the Sith",
  isDisable: false
},
{
  name: "Episode IV - A New Hope",
  isDisable: false
},
{
  name: "Episode V - The Empire Strikes Back",
  isDisable: false
},
{
  name: "Episode VI - Return of the Jedi",
  isDisable: false
}
];

drop(event: CdkDragDrop<string[]>) {
console.log(event.currentIndex + "|||" + event.previousIndex);
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}
}

Here is a StackBlitz displaying the problem.

https://stackblitz.com/edit/angular-open-window-g5stn3?file=src%2Fapp%2Fwindow.component.ts

In the page you can see a list...this list is able to be reordered by dragging and dropping.

Now click the "Open me" button and then try to drag to re-order the same list (I couldn't get the styling in it but it is the same code) It will not reorder.

It contains the same html code but it doesn't include JavaScript and css — yurzui, Nov 12 '20 at 14:46
Everything is in the Stackblitz...I don't understand what it is that is missing — Funn_Bobby, Nov 12 '20 at 16:08
Because you are not sending/emitting the array to the window, ie. You need to emit (this.movies) to windows. — Sarath Mohandas, Dec 02 '20 at 06:10

Andrew Alderson · Answer 1 · 2020-12-01T01:15:03.297

As has already been pointed out, the html for the external window doesn't contain the JavaScript and css needed to make the CdkDragDrop functionality work. The external window is disconnected from your Angular app. Just like the main page hosting your Angular app this window requires not only the code to make the CdkDragDrop work but also the Angular runtime code.

If you don't have a requirement that says it needs to be an external window you could just use a modal dialog. If you do have a requirement for an external window then you basically need to create a mini Angular app in the pop up. I have never had to do this with Angular but from what I have been reading Angular Elements might be the best way to do this.

https://angular.io/guide/elements

If there was a requirement to communicate between the windows then window.postMessage could be used.

CdkDragDrop in CdkPortal is not responding

1 Answers1