Installation

Install the package, add the stylesheet, drop in the no-flash theme script, and start importing standalone components — no NgModule wiring required.

Install the package

Install @adminlte/angular alongside its required peer dependencies:

npm install @adminlte/angular admin-lte bootstrap bootstrap-icons
# optional, only if you use the charts wrapper:
npm install apexcharts

@adminlte/angular declares @angular/core, @angular/common, @angular/forms, @angular/router, bootstrap and admin-lte as peer dependencies. The plugin libraries (apexcharts, flatpickr, tom-select, simple-datatables) are optional peers — install only the ones whose wrapper components you actually use. See Charts & plugins.

1. Add the styles

The library ships AdminLTE's compiled CSS via its ./css export. Register it together with Bootstrap Icons in the styles array of angular.json:

"styles": [
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "node_modules/@adminlte/angular/css/adminlte.css",
  "src/styles.css"
]

The AdminLTE CSS bundles Bootstrap 5.3, so you do not need to add a separate Bootstrap stylesheet. Alternatively, import it from your global stylesheet:

/* src/styles.scss */
@import 'bootstrap-icons/font/bootstrap-icons.css';
@import '@adminlte/angular/css/adminlte.css';

2. No-flash theme script

Dark mode is reflected onto <html data-bs-theme>. To apply the persisted theme before Angular boots — avoiding a flash of the wrong theme — add this snippet to the <head> of src/index.html:

<script>
  (function () {
    try {
      var m = localStorage.getItem('lte-theme') || 'auto';
      var d = m === 'dark' || (m === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
      document.documentElement.setAttribute('data-bs-theme', d ? 'dark' : 'light');
    } catch (e) {}
  })();
</script>

The same string is exported from the library as COLOR_MODE_NO_FLASH_SCRIPT, so SSR/host apps can inject it programmatically. The storage key is lte-theme.

3. Import standalone components

There are no modules. Import each component class directly into the imports array of the standalone component that uses it:

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DashboardLayoutComponent, type MenuNode } from '@adminlte/angular';

@Component({
  selector: 'app-shell',
  imports: [DashboardLayoutComponent, RouterOutlet],
  template: `
    <lte-dashboard-layout [menuItems]="menu" [currentPath]="currentPath()">
      <router-outlet />
    </lte-dashboard-layout>
  `,
})
export class ShellComponent {
  readonly menu: MenuNode[] = [
    { type: 'item', text: 'Dashboard', route: '/', icon: 'bi-speedometer' },
  ];
  readonly currentPath = signal('/');
}

Router setup

The layout's command palette and sidebar links use the Angular Router, so make sure your app provides it (standalone bootstrap shown):

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
});

That is everything needed to render the shell. Continue to Configuration to wire up the dashboard layout.

AdminLTE 4 · Angular port Edit on GitHub