Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Calendar
Card
Card Overlay
Carousel
Chips
Code Highlighter
Color Picker
Color Switcher
Command Bar
Comment Editor
Comparison Slider
Confirm
Cookie Popup
Crop
Datepicker
Dialog
Digit Roller
Divider
Drawer
Emoji Picker
Empty State
Events
Expand
Expansion Panel
File Type
Filter Builder
Gauge
Grid
Guided Tour
Headless Stepper
Icon
Image Placeholder
Image Resizer
Image Viewer
Image Zoom Viewer
Incidents
Keyboard
Layout
List
Marquee
Menu
Notifications
Paginator
Popover
Progress Bar
Progress Spinner
Resizable Container
Screen Loader
Sidenav
Signature Pad
Skeleton
Slider
Snackbar
Sort
Split Pane
Step Tracker
Stepper
Suggestions
Table
Tabs
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Typed Signature Pad
Upload
Video Viewer
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Headless Editor
Image Designer
Kanban Board
PDF Builder
PDF Signer
PDF Viewer
Video Player
HomeTemplatesLicense
GitHub repositoryGitHub starsGitHub forksNgStarter UI npm versionNgStarter UI npm downloads per month

Layout

Layout structures both full viewport application shells and local workspaces such as editors, settings, and detail pages. It defines the main screen regions: topbar, header, subheader, sidebar, content, aside, and footer.

Use root for the application shell and non-root layouts for local workspaces with managed height, nested layouts, scrollable content, and an optional sidebar that can be shown, hidden, or toggled through LayoutApiService.

Key Features:
  • Semantic regions for topbar, header, subheader, sidebar, content, aside, and footer.
  • Root mode for full viewport shells and absolute mode to fill a positioned parent.
  • Nested layouts for complex admin and workspace screens.
  • Built-in content scrolling with optional auto-scroll to top on navigation.
  • Sidebar visibility control by layoutId through LayoutApiService.

Do not use Layout as a small wrapper, card, spacing helper, form grouping tool, or generic grid system. Use TailwindCSS grid, flex, and spacing classes inside layout regions. Use Grid for static dashboard widgets, Tiles for dashboards users can rearrange or customize, DataView or Table for datasets, Drawer for overlay side panels, and navigation components inside sidebars.

The NgStarter Angular Layout component lets you provide the base top-level shell for an application, admin area, dashboard, or large workspace page. Use ngs-layout as the outer structural frame when the whole screen needs topbar, header, sidebar, scrollable content, aside, or footer regions. It includes examples for Layout header, Layout sidebar, Layout header with sidebar, and Layout header with topbar.

Building a full admin shell? Read the Angular Admin Layout tutorial to see how root and workspace layouts work together with Sidenav, Sidebar, and ScrollbarArea.

Layout header

Use a layout header when the page shell needs a fixed structural header above the main content area.

Header
Body

Layout sidebar

Use a layout sidebar for persistent side navigation, filters, or workspace context inside the top-level shell.

Sidebar
 Body

Layout header with sidebar

Combine header and sidebar for common admin screens where navigation stays beside a scrollable content region.

Header
Sidebar
 Body

Layout header with topbar

Add a topbar above the header for global announcements, account-wide notices, or other app-level messages.

You still have not uploaded your Mart invoice due on 22 April 2024
Header
Body with scroll

Layout footer

Use a layout footer when the shell needs a stable bottom region below the scrollable content area.

Body
This is footer example © 2024

Layout header with footer

Use header and footer together when a page shell needs both top controls and bottom metadata or actions.

Header
Body
This is footer example © 2024

Layout aside

Use a layout aside for a persistent secondary side region, such as details, activity, preview, or supporting context.

Sidebar
 Body
Aside

Layout with nested layouts example

Nest layouts when a large application shell contains another structured workspace with its own header, content, and footer.

You still have not uploaded your Mart invoice due on 22 April 2024
Header
Sidebar
Subheader
Body with scroll
This is footer example © 2024

Local workspace

Use a non-root Layout for editors, detail pages, settings, and local workspaces. Add absolute to fill a positioned parent.

Header
Body
Footer

Workspace with sidebar, subheader, and aside

The subheader holds filters or secondary actions. Sidebar and aside flank the scrolling content while the header and footer span the workspace.

HeaderFilters and secondary actions
Sidebar
Body
Aside
Footer

Related components

KeyboardMore docs in Components.ListMore docs in Components.IncidentsMore docs in Components.