angularangular-materialresizable

Dragable and Resizable div with angular

I am trying to create resizable div containers and also they are dragable.

I used Angular material Drag and Drop and angular resizable element

Here is workaround https://stackblitz.com/edit/angular-syurbs?embed=1&file=src/polyfills.ts

But when I apply both, I can drag but I can't resize.

https://stackblitz.com/edit/angular-41rqyo?file=src%2Fapp%2Fapp.component.html

How can I achieve both in one?

Solution

  • Use cdkDragHandle directive on an icon or button <button cdkDragHandle>Drag Icon</button>

    See the whole api here https://material.angular.io/cdk/drag-drop/api

    Example: https://stackblitz.com/angular/jamgbjgmynoq