Create a Resizable and Draggable Angular Component in the Easiest Way
A resizable and draggable HTML div element can add more possibilities into your website by allowing you to make more flexible components, such as a draggable back-to-top button, a resizable calendar, a movable video window and etc.
In this post, we will go through the process of making a resizable and draggable component step by step with less than 100 lines of code. The structure of this article is shown below:
- Create a resizable component
- Make the component draggable
- Add boundary restrictions into moving & resizing actions
View details in my github repo: angular-resizable-draggable.
1. Create a resizable component
1.1 Component Initialization
As part of the initial settings, I have initialized an Angular project with a 600x450px container for the component we are going to make.
After that, we need to initialize a resizable-draggable component and pass some initial @Input values into the component, and bind them with the component’s style.