Search code examples
angularangular-materialangular-animationsangular-cdk

Custom component animation does not work in Angular 9 + CDK`on drag n drop

I'm tryng to create a list that user can reorder items, it is pretty straightforward to do using @angular/cdk/drag-drop and following the sample in official documentation (https://material.angular.io/cdk/drag-drop/overview).

My sample does work, it can reorder the list on drag n drop but animation does not work on custom components, I mean, the list container and list item are custom component as you can see in Stackblitz:

https://stackblitz.com/edit/angular-ivy-kl3vgd

How do I make animations work just like in Angular "Drag&Drop sorting" sample?

Thanks in advance,

Solution

  • I think the built-in animations should work if you put your component within a div which is the draggable object

    <div *ngFor="let file of files" cdkDrag>
    <app-upload-item>
        {{file}}
    </app-upload-item>
</div>