Vertical Splitter in Angular

Created: 08 February 2018

In some cases when arranging elements inline, you may need to add a vertical splitter and resize them during run-time. As a solution, you can use the built-in functionality of IntegralUI Splitter component for Angular, which allows you add a vertical or horizontal splitter to any HTML element or Angular component.

In current state, you have 2 block elements and a splitter component between them. In order to appear in line, you need to set the CSS display attribute of each element to inline-block. This will make sure the elements are placed next to each other.

Right now, the splitter is not functional. You need to set the following Angular properties of the Splitter component:

panel1 - holds a reference to the left block element

panel2 - holds a reference to the right block element

splitterDistance - specifies the distance in pixels from the left position of the first element

To create a reference to block elements, you can use an Angular variable specified in tag of the HTML element. In this case, block elements have #panel1 and #panel2 variable names. Next, from code, you need to use ViewChild directive to get a reference to each element using its variable name. Once you have these references, you can add them as values to corresponding property of the Splitter component.

As a result, you have a container with a splitter that divides its content between two block elements. Whenever splitter distance changes, the splitterMoving and splitterMoved events are fired. By handling these events, you can add custom code and extend the splitter functionality.

Conclusion

When you need to add a vertical splitter between HTML elements, you can use the IntegralUI Splitter component for Angular. You only need to add the component in HTML template and set up its panel properties to point to the references of each block element to which the splitter is attached.

The Splitter has built-in functionality that allows you to resize elements during run-time and fires an event whenever the distance changes, which you can handle in your code and place additional functionality.

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.