Angular Panel Layout: Create Admin Workspaces with ngs-panel

Why angular panel layout starts with ngs-panel

An angular panel layout is the workspace layer inside your application shell. The root layout and sidenav own the viewport, while ngs-panel owns the current page: header, optional subheader, scrollable body, side navigation, inspector, and footer actions. This keeps admin pages predictable and prevents every screen from rebuilding its own layout primitives.

Import the panel building blocks

Start with the public panel entry point and add ScrollbarArea for any region that needs internal scrolling. For action rows, compose Toolbar inside ngs-panel-header.

panel imports

import {
  Panel,
  PanelAside,
  PanelContent,
  PanelFooter,
  PanelHeader,
  PanelSidebar,
  PanelSubheader,
} from '@ngstarter-ui/components/panel';
import { ScrollbarArea } from '@ngstarter-ui/components/scrollbar-area';
import { Toolbar, ToolbarSpacer, ToolbarTitle } from '@ngstarter-ui/components/toolbar';

Single workspace layout

Use this angular panel layout for list pages, dashboards, and route content where the screen only needs a header and one scrollable workspace. The important detail is that ngs-panel-content contains the scroll host.

single-workspace-panel.html

<ngs-panel>
  <ngs-panel-header>
    <ngs-toolbar>
      <ngs-toolbar-title>Customers</ngs-toolbar-title>
      <ngs-toolbar-spacer />
      <button ngsButton="filled">New customer</button>
    </ngs-toolbar>
  </ngs-panel-header>

  <ngs-panel-content>
    <ngs-scrollbar-area>
      <div class="p-6">
        <!-- DataView, cards, tables, or route content go here. -->
      </div>
    </ngs-scrollbar-area>
  </ngs-panel-content>
</ngs-panel>

Header, content, and footer actions

Add ngs-panel-footer when the page has persistent actions, such as saving a form or confirming an editor. The body can scroll independently while the footer stays reachable.

panel-with-footer.html

<ngs-panel>
  <ngs-panel-header>
    <ngs-toolbar>
      <ngs-toolbar-title>Invoice editor</ngs-toolbar-title>
      <ngs-toolbar-spacer />
      <button ngsButton="outlined">Preview</button>
    </ngs-toolbar>
  </ngs-panel-header>

  <ngs-panel-content>
    <ngs-scrollbar-area>
      <div class="p-6">
        <!-- Long editable form sections. -->
      </div>
    </ngs-scrollbar-area>
  </ngs-panel-content>

  <ngs-panel-footer class="flex items-center justify-end gap-3 px-6">
    <button ngsButton="text">Cancel</button>
    <button ngsButton="filled">Save invoice</button>
  </ngs-panel-footer>
</ngs-panel>

Master-detail panel layout

For records, inboxes, CRM objects, and operational queues, place the collection in ngs-panel-sidebar and the selected record in ngs-panel-content. This angular panel layout avoids manual split wrappers while keeping both regions independently scrollable.

master-detail-panel.html

<ngs-panel>
  <ngs-panel-header>
    <ngs-toolbar>
      <ngs-toolbar-title>Opportunities</ngs-toolbar-title>
      <ngs-toolbar-spacer />
      <button ngsButton="outlined">Filter</button>
    </ngs-toolbar>
  </ngs-panel-header>

  <ngs-panel-sidebar class="w-80 border-r border-border">
    <ngs-scrollbar-area>
      <div class="p-4">
        <!-- SelectionList or compact record list. -->
      </div>
    </ngs-scrollbar-area>
  </ngs-panel-sidebar>

  <ngs-panel-content>
    <ngs-scrollbar-area>
      <div class="p-6">
        <!-- Selected record overview, tabs, and activity. -->
      </div>
    </ngs-scrollbar-area>
  </ngs-panel-content>
</ngs-panel>

Content with a persistent inspector

Use ngs-panel-aside for supporting context: activity feeds, comments, selected filters, analytics insights, or AI assistant notes. The aside belongs to the panel because it is part of the current workspace, not the global application shell.

panel-with-inspector.html

<ngs-panel>
  <ngs-panel-header>
    <ngs-toolbar>
      <ngs-toolbar-title>Campaign performance</ngs-toolbar-title>
      <ngs-toolbar-spacer />
      <button ngsButton="outlined">Export</button>
    </ngs-toolbar>
  </ngs-panel-header>

  <ngs-panel-content>
    <ngs-scrollbar-area>
      <div class="grid gap-6 p-6 xl:grid-cols-3">
        <!-- KPI cards, charts, and supporting tables. -->
      </div>
    </ngs-scrollbar-area>
  </ngs-panel-content>

  <ngs-panel-aside class="w-80 border-l border-border">
    <ngs-scrollbar-area>
      <div class="p-5">
        <!-- Persistent insights, comments, or audit trail. -->
      </div>
    </ngs-scrollbar-area>
  </ngs-panel-aside>
</ngs-panel>

Settings workspace with subheader, sidebar, content, and aside

Complex admin settings often need secondary navigation, explanatory context, and a focused form area. This angular panel layout uses all major panel regions while still keeping the structure readable.

settings-panel-layout.html

<ngs-panel>
  <ngs-panel-header>
    <ngs-toolbar>
      <ngs-toolbar-title>Settings</ngs-toolbar-title>
      <ngs-toolbar-spacer />
      <button ngsButton="filled">Save changes</button>
    </ngs-toolbar>
  </ngs-panel-header>

  <ngs-panel-subheader class="px-6">
    <p class="text-sm text-on-surface-variant">
      Manage workspace defaults, billing rules, and security preferences.
    </p>
  </ngs-panel-subheader>

  <ngs-panel-sidebar class="w-72 border-r border-border">
    <ngs-scrollbar-area>
      <div class="p-4">
        <!-- Secondary settings navigation. -->
      </div>
    </ngs-scrollbar-area>
  </ngs-panel-sidebar>

  <ngs-panel-content>
    <ngs-scrollbar-area>
      <div class="mx-auto max-w-3xl p-6">
        <!-- One form section per card or panel group. -->
      </div>
    </ngs-scrollbar-area>
  </ngs-panel-content>

  <ngs-panel-aside class="w-80 border-l border-border">
    <div class="p-5">
      <!-- Help, policy notes, or required actions. -->
    </div>
  </ngs-panel-aside>
</ngs-panel>

Keep sizing and tokens local

The panel should fill the workspace it is placed in. Keep routine spacing in template utility classes, and put small local tokens or component overrides under :host.

workspace-panel.scss

@reference 'tailwindcss';

:host {
  display: block;
  height: 100%;

  ngs-panel {
    height: 100%;
  }

  .workspace-note {
    color: var(--ngs-color-on-surface-variant);
    font-size: 0.875rem;
    line-height: 1.6;
  }
}

Angular panel layout checklist

Use ngs-panel-header for page title, filters, and primary actions.
Use ngs-panel-content as the main scrollable workspace.
Use ngs-panel-sidebar for local record navigation or settings navigation.
Use ngs-panel-aside for inspectors, details, help, or activity.
Use ngs-panel-footer for persistent confirmation actions.

Once the panel structure is stable, fill each region with NgStarter components such as DataView, Card, List, FormField, Table, Timeline, and NotificationList. That keeps your angular panel layout consistent across every admin page.