AdminLTE 4 for Angular

The official AdminLTE 4 port for Angular 22 — a signal-first, standalone-component library built on Bootstrap 5.3. Dark mode, a config-driven sidebar, and a ⌘K command palette, all without jQuery or NgModules.

What it is

@adminlte/angular is a component library that brings the full AdminLTE 4 dashboard to Angular as a set of standalone components. There are no NgModules to wire up: every component is imported directly into the component that uses it. State is exposed through signals (input(), output(), model()) and the new template control flow (@if, @for, @switch).

The library is published to npm as @adminlte/angular and ships AdminLTE's compiled CSS via its ./css export. It is a thin, typed layer over Bootstrap 5.3 markup — you keep full access to Bootstrap's utility classes and grid.

Key features

  • Angular 22, signal-first — standalone components, input()/output()/model(), the new control flow, and the modern esbuild application builder. Zoneless-friendly.
  • SSR-safe dark mode — the resolved theme is reflected onto <html data-bs-theme> (the Bootstrap 5.3 standard), persisted to localStorage with a system-preference fallback, plus a no-flash inline script for first paint.
  • Config-driven sidebar — a typed MenuNode[] (headers, links, collapsible groups, badges, per-item visible flags) with active-link detection and accordion treeviews.
  • Command palette (⌘K) — fuzzy search over your menu with full keyboard navigation, routing through the Angular Router.
  • 40+ components — layout, widgets and form controls, all under the Lte…Component naming convention with the lte- selector prefix.
  • Tree-shakeable — heavy peer dependencies (ApexCharts, flatpickr, Tom Select, simple-datatables) are lazy-loaded only when the wrapping component is used.

Version & requirements

The library targets Angular 22 and Bootstrap 5.3. Its peer dependencies are @angular/core, @angular/common, @angular/forms, @angular/router, admin-lte and bootstrap — with apexcharts, flatpickr, tom-select and simple-datatables as optional peers.

Selectors use the lte- prefix (for example <lte-card>); the exported class names follow the Lte…Component convention (for example CardComponent). Both are listed in Components.

Browser support

Modern evergreen browsers (Chrome, Edge, Firefox, Safari), matching Bootstrap 5.3 and Angular 22 support targets.

Links

Ready to build? Head to Installation.

AdminLTE 4 · Angular port Edit on GitHub