Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Resizable Container

Resizable Container lets users manually change the width of one container with a vertical drag handle. It updates the container width within the parent bounds and emits the new width.

Use it for a resizable preview pane, editor canvas, inspector or detail panel, side content area, responsive demo area, chart preview, or docs playground.

Do not use it for split layouts between two panels, image resizing, table column resizing, or normal responsive containers that should resize automatically.

Key Features:
  • Width resizing through a right-side drag handle.
  • Minimum width constraint.
  • resized event with the current width.
  • Works with arbitrary content inside the container.

The NgStarter Angular Resizable Container component lets you let users manually resize the width of one container with a vertical drag handle. Use ngs-resizable-container around content when the user should manually adjust the width of a single block. It includes examples for Basic Resizable Container.

Basic Resizable Container

Use a resizable container when users need to manually adjust the width of one content area.

01
02
03
04
05
06
07
08
09