Angular 8 | Re-sizable Elements and Layouts in Angular 8 Application

In this tutorial, we will Implement resizable feature on elements and layout. By adding resizable feature a user can resize a container or element by dragging from corners.

The resizable feature can be added in many areas in an application to resize the editable container, Images, Dashboard sections, etc.

To implement Resizable feature we will use angular-resizable-element package for Angular 6+ version by Matt Lewis

let’s get started!

First, let us create a new Angular project in version 8 using Ng CLI

Run following NPM command to create a new project

Here we are not using Routing to keep tutorial simple and opting CSS for styling

Install Resizable Package in Project

After successfully creating the project, run following NPM command to install Angular Resizable Element package

After that, we need to import ResizableModule in app.module.ts file in the imports array

Add Resizable Element in Component

Now in app.component.html file, add following HTML div container with mwlResizable directive

There are also 4 div elements with mwlResizeHandle directive which will act s resize handle.

(resizeEnd) is event handler which will trigger after the container is resized.

In the app.component.ts file, import ResizeEvent interface.

Add validate() method to set min width and height and onResizeEnd() method.

Add CSS Style

Now update the app.component.css file with following CSS style for resizable container and resize handles.

That’s it now run the app by running in a browser to test resizing feature.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Andrea Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Andrea
Guest
Andrea

how is it possible that the validate method can´t not read the this. variables?
thanks