Layout

Layout is the base top-level shell for an application, admin area, dashboard, or large workspace page. It defines the main screen regions: topbar, header, sidebar, content, aside, and footer.

Use it when the whole screen needs a stable structural frame 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, sidebar, content, aside, and footer.
A root mode for full viewport application shells.
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.

Layout header

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

Body

Layout sidebar

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

Body

Layout header with sidebar

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

Body

Layout header with topbar

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

Body with scroll

Layout footer

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

Body

Layout header with footer

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

Body

Layout aside

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

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.

Body with scroll