CODEWITHSUNDEEP
angulartypescriptangular-materialangular-cdkangular8
lampshade
lampshade

Reputation: 2816

Angular CDK Drag and Drop won't work after updating component's HTML

I have a fresh system of Angular 8. There's one Module with one Component:

ng new my-app --enable-ivy
npm install --save @angular/material @angular/cdk @angular/animations
npm install --save hammerjs

In the Module I'm adding:

import { DragDropModule } from '@angular/cdk/drag-drop';

and also:

@NgModule({
  imports: [
    DragDropModule
  ]
})

In the Component's HTML I added this:

<div cdkDrag>
  Drag me around!
</div>

Now I serve the site using:

ng serve --port 4300

And voila, I can drag the item around.

However, when I update anything of the Component's HTML and the page refreshes, I can't drag the element anymore. The text changes are reflected for example. But the the drag functionality is gone.

When I restart the server on the CLI it works again, until I udate the markup.

This doesn't happen when I change the Component's TypeScript-file, only when the HTML is altered.

What is the problem?

Upvotes: 0

Views: 1973

Answers (1)

lampshade
lampshade

Reputation: 2816

This was an issue with Angular 8.0. Updating to Angular 8.2 and the corresponding Angular Material CDK package solved the problem.

Upvotes: 1

Related Questions