Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

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