3 minutes to Resizing flex items with Angular directives
By: Mohit Shah
Tags: Angular, CSS, JavaScript, HTML, Typescript

We will cover how to create customized resize component in Angular with help of directives and bunch of mouse events.

Last week, I had been given a use-case to develop and that was resizing application page which was 2 column flex layout in horizontal direction. To get the idea about what I am talking you can see the video below:

Resizing Flex items

On getting this requirement, I first hop on to the most simplest solution that is resize CSS property, applied it on the respective div and voila! it was working as expected, but it lost flex properties.

Then came across another solution, Angular-resizable-element npm package. It also had similar issues as the previous solution. After searching for hours, I thought not to waste time into ready made packages. Let’s build our own customized resizable component.

So, let’s cut the chase and straight dive into the code ….

We will first setup 2 column dummy flex layout with following code:

This will create flex container and with 2 flex items in row direction and we have added some CSS to add border to it. Class selector grabber is basically a middle portion between items that will allow to resize items horizontally.

For resize directive, Let me explain each line of code for resize component which is given below:

Let’s first discuss regarding grabber variable. It is being used to identify when is mouse key pressed and when it is released. So basically, we need to resize when mouse key is pressed and stop resizing when it is released.

Now, we are using 3 mouse events namely :

Mouse down event: This will handle events that will be raised when mouse key is pressed and not released yet. So tasks handled here are making grabber true and adding class side-panel to the grabber element. It is CSS class selector which we have defined in app.component.css and that highlights the portion between 2 flex-items. We are changing cursor as well , just to notify the user that resize is going on.

Mouse Up event: This will handle events that will be raised when mouse key is released. So tasks handled here are making grabber false and removing class side-panel.We also revert back the cursor to the original indicating resizing is complete.

Mouse Move event:This will handle events that will be raised when mouse is moving. So here we need to resize, so what we do here is we track movement along horizontal lines through movementX whether it is mouse is moving left or right. Based on the direction, we reduce the size of left and right flex items accordingly. Now, how to reduce or increase the size you ask ? That we can do with the help of clientX and availWidth.

clientX basically gives current position of mouse in the browser window and that we can use to trick into position. Similarly, availWidth gives width of the entire screen and it is used with clientX for resizing right end element.

Last piece of puzzle for it to work on all screen sizes is to provide one through resize events and that too with help of outerWidth and it works on cross browsers.

Its Amazing if you make it till the end. Hope you liked my content or it helped you in any way.

For access to entire code, Please checkout my repository on Github.

Cheers and Happy learning.