Configuration

The <lte-dashboard-layout> component is the heart of the app. It composes the topbar, sidebar, content region, footer and the ⌘K command palette, and configures the shared sidebar and color-mode services from a handful of inputs.

The shell component

The recommended pattern is a single shell component that hosts the layout and a <router-outlet />. It feeds currentPath from router events so the sidebar highlights the active link and auto-opens its parent group:

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
import { toSignal } from '@angular/core/rxjs-interop';
import { filter, map, startWith } from 'rxjs';
import { DashboardLayoutComponent } from '@adminlte/angular';
import type { TopbarUser } from '@adminlte/angular';
import { MENU } from './menu';

@Component({
  selector: 'app-shell',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [DashboardLayoutComponent, RouterOutlet],
  template: `
    <lte-dashboard-layout
      [menuItems]="menu"
      [user]="user"
      brandText="AdminLTE 4"
      logo="/AdminLTELogo.png"
      [currentPath]="currentPath()"
      [accordion]="true"
      [fixedHeader]="true"
      [enableSidebarPersistence]="true"
      (logout)="onLogout()"
    >
      <router-outlet />
      <span footer><b>Version</b> 4.0.0</span>
    </lte-dashboard-layout>
  `,
})
export class ShellComponent {
  private readonly router = inject(Router);

  readonly menu = MENU;
  readonly user: TopbarUser = {
    name: 'Jane Developer',
    image: 'https://www.gravatar.com/avatar/?d=mp&s=160',
    role: 'Angular Engineer',
    memberSince: 'Jan. 2026',
  };

  readonly currentPath = toSignal(
    this.router.events.pipe(
      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
      map((e) => e.urlAfterRedirects.split('?')[0]),
      startWith(this.router.url.split('?')[0]),
    ),
    { initialValue: '/' },
  );

  onLogout(): void {
    void this.router.navigateByUrl('/login');
  }
}

Layout inputs

menuItems is the only required input. Everything else has a sensible default.

Input	Type	Default	Purpose
`menuItems`	`MenuNode[]`	—	Sidebar menu config (required). See Menu.
`user`	`TopbarUser`	demo user	Name, image, role, memberSince for the user dropdown.
`brandText`	`string`	`'AdminLTE 4'`	Sidebar brand label.
`logo`	`string`	—	Sidebar brand logo URL.
`logoHref`	`string`	`'/'`	Brand link target.
`currentPath`	`string`	`'/'`	Active path for link highlighting / group auto-open.
`accordion`	`boolean`	`false`	Only one sidebar group open at a time.
`fixedHeader`	`boolean`	`false`	Adds `fixed-header` to `<body>`.
`fixedSidebar`	`boolean`	`false`	Adds `fixed-sidebar`.
`fixedFooter`	`boolean`	`false`	Adds `fixed-footer`.
`layoutFixed`	`boolean`	`true`	Adds `layout-fixed`.
`sidebarTheme`	`'light' \| 'dark'`	`'dark'`	Sidebar color (independent of global theme).
`sidebarMini`	`boolean`	`false`	Mini (icon-only) collapsed sidebar.
`sidebarBreakpoint`	`BreakpointSize`	`'lg'`	Breakpoint below which the sidebar becomes an overlay.
`enableSidebarPersistence`	`boolean`	`false`	Persist collapse state to `localStorage`.
`colorModeToggle`	`boolean`	`true`	Show the light/dark toggle in the topbar.
`initialColorMode`	`'light' \| 'dark' \| 'auto'`	`'auto'`	Default theme when the user has no saved choice.

Outputs

The layout re-emits the topbar user-menu actions: (logout) and (profile), both void. Wire (logout) to your auth flow as shown above.

A persisted user choice always wins: initialColorMode only applies when nothing is stored under lte-theme. Likewise, enableSidebarPersistence restores the collapse state from lte.sidebar.state.

Next, see how content slots into the shell in Layout.

AdminLTE 4 · Angular port Edit on GitHub