Layout

The layout components assemble the AdminLTE shell: a fixed topbar, an off-canvas sidebar, a main content region, and a footer. Most apps only touch <lte-dashboard-layout> and <lte-app-content> directly.

The shell and its slots

<lte-dashboard-layout> exposes three content slots. The default slot is your routed page content (typically a <router-outlet />); the [topbar-start] / [topbar-end] slots inject navbar items; the [footer] slot fills the app footer.

<lte-dashboard-layout [menuItems]="menu" [currentPath]="currentPath()">
  <ng-container topbar-end>
    <li lte-nav-messages [messages]="messages"></li>
    <li lte-nav-notifications [notifications]="notifications"></li>
    <li lte-nav-tasks [tasks]="tasks"></li>
  </ng-container>

  <router-outlet />

  <span footer><b>Version</b> 4.0.0</span>
</lte-dashboard-layout>

Under the hood the layout renders <lte-topbar>, <lte-sidebar>, a <main class="app-main"> holding your content, and <lte-footer>, plus the ⌘K <lte-command-palette>.

Topbar

The topbar ships a sidebar toggle, a search trigger (⌘K), a fullscreen toggle, the color-mode toggle and a user dropdown built from the user input. Use the [topbar-end] slot for the three built-in dropdown widgets, which attach via attribute selectors on a <li>:

[lte-nav-messages] — message list dropdown (NavMessage[]).
[lte-nav-notifications] — notification list dropdown (NavNotification[]).
[lte-nav-tasks] — task progress dropdown (NavTask[]).

These rely on Bootstrap's dropdown JS, so ensure bootstrap is installed (it is a required peer dependency).

App content & breadcrumbs

Wrap each page body in <lte-app-content>. It renders an optional header row (page title + breadcrumbs) above a Bootstrap container. Breadcrumbs are typed as Breadcrumb[] — { label, route?, href? } — and the last crumb renders as the active page.

<lte-app-content
  title="Dashboard"
  [breadcrumbs]="[{ label: 'Home', route: '/' }, { label: 'Dashboard' }]"
>
  <div class="row">
    <!-- page widgets go here -->
  </div>
</lte-app-content>

Input	Type	Default	Purpose
`title`	`string`	—	Page heading (omit to hide the header row).
`breadcrumbs`	`Breadcrumb[]`	`[]`	Right-aligned breadcrumb trail.
`fluid`	`boolean`	`true`	`container-fluid` vs `container-lg`.

Footer

<lte-footer> renders whatever you project into the layout's [footer] slot. When nothing is projected, it falls back to the default AdminLTE copyright line. Used standalone it also accepts a rightText input (right-aligned, hidden on extra-small screens) and a year input.

Auth layout

Login and register pages live outside the dashboard shell. Use <lte-auth-layout> for a centered card layout — it applies the page-level <body> classes while mounted and removes them on destroy:

<lte-auth-layout authType="login" variant="v2" logo="/AdminLTELogo.png">
  <form>
    <!-- login fields -->
  </form>
</lte-auth-layout>

Inputs: authType ('login' | 'register'), variant ('default' | 'v2'), logo and logoHref. In your routes, place these pages as siblings of the shell, not children:

export const routes: Routes = [
  { path: 'login', loadComponent: () => import('./pages/login.page').then((m) => m.LoginPage) },
  {
    path: '',
    component: ShellComponent,
    children: [
      { path: '', loadComponent: () => import('./pages/dashboard.page').then((m) => m.DashboardPage) },
      // ...more dashboard pages
    ],
  },
];

The layout writes responsive state (sidebar-collapse, sidebar-open) and the static classes (layout-fixed, sidebar-expand-lg, fixed-header, …) onto <body> imperatively, and tears them down when destroyed — so navigating from the shell to an auth page never leaks classes.

AdminLTE 4 · Angular port Edit on GitHub