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

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.

ngs-side-panel

PropTypeDefault
position
Position of the side panel
'left' | 'right''right'
EventDescription
openedEvent emitted when the panel is opened
closedEvent emitted when the panel is closed

ngs-side-panel-tab

PropTypeDefault
tabId*
Unique identifier for the tab
string
label*
Label displayed for the tab
string
icon
Icon displayed for the tab
string | TemplateRef<any>undefined