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

Side Panel

Side Panel provides an embedded side utility panel with a vertical strip of icon tabs and an expandable content area. Use it inside app or workspace layouts when the main page needs persistent secondary tools or inspectors beside the primary content.

Use ngs-side-panel with ngs-side-panel-tab for panels such as info, outline, layers, activity, comments, assets, properties, preview settings, and quick tools. Each tab has a tabId, label, and optional icon name or custom icon template.

Do not use Side Panel as a temporary overlay, modal workflow, confirmation dialog, generic page section, primary navigation, content tabs, or action menu. Use Drawer, Dialog, Confirm, Panel, Sidebar, Sidenav, Navigation, RailNav, Tabs, or Menu when those match the job better.

The NgStarter Angular Side Panel component lets you provide an embedded side utility panel with tabbed tools beside the main content. Use ngs-side-panel inside an app or workspace layout when the page needs persistent secondary tools or inspectors next to the primary content. It includes examples for Basic side panel.

Basic side panel

Use SidePanel when a workspace needs persistent secondary tabbed tools beside the main content.

Header
Body content