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.

Leave a Reply

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

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