Drag

The directive DragDirective allows to listen to drag gestures on an element. It can be used to implement custom drag and drop functionality, to create resizable elements, or to implement custom drag interactions.

This example uses another directive duiPositionChange which uses observePosition to monitor arbitrary element position and size changes (using efficient IntersectObserver and ResizeObserver).

Splitter

The component dui-splitter is tailored for resizing layouts, such as sidebars or panels.

Use [element] to safely set the [property] of the element. It makes sure that [size] it the real size of the element after drag ended. Use instead or additionally [size] with (sizeChange) to persist and load the size in e.g. localStorage.