BadJuju
BadJuju

Reputation: 195

Angular: Drag and Drop mat preview is not showing

Sorry for stupid question.

The preview's not showing when I created child components and put directive into them like this:

            <div *ngFor="let item of items"
                 cdkDropList
                 [cdkDropListConnectedTo]="id">
              <app-child1 [params]="params" *cdkDragPreview/>
              <app-child2 [params]="params" *cdkDragPreview/>
            </div>

It works properly without child component

What is going on here?

Thanks in advance!

Upvotes: 0

Views: 1689

Answers (1)

user2846469
user2846469

Reputation: 2220

cdkDragPreview has to be within a parent element with the cdkDrag directive and you can only have one cdkDragPreview (instead of the two that you have). See the example:

 <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>
    {{movie.title}}
    <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
  </div>
</div>

Official Angular Example of cdkDragPreview

Upvotes: 1

Related Questions