vertically split panel with draggable handle to adjust panel's height

Question

I'm new to angular. I'm creating vertically split panel with "drag handle" to adjust top and bottom tree panel. I've implemented three stages toggle but I'm not be able to execute dragging of height of the div with mouse event vise-versa. I do not want to use renderer or HostListener or ng-split directive maybe with custom function/method would be nice. can anybody look at my code and help me out. here's what I've done so far.

https://stackblitz.com/edit/angular-hm4zy9?file=src%2Fapp%2Fapp.component.html

Answer 1

My suggestion is to subscribe to drag event, also do not forget to add draggable="true" to your draggable element. The calculations seem to be correct from the first sight. Check the demo, I've changed just a bit of your code