Technology Stack

Built on the Cutting Edge

Every dependency is handpicked for performance, longevity, and developer experience.

Angular
v22.0
🅱
Bootstrap
v5.3
🏗
TypeScript
v6.0
🔁
NgRx Signals
v21
📊
ApexCharts
v5
📈
ECharts
v6
📉
Chart.js
v4
📅
FullCalendar
v6
CKEditor 5
Classic
🪶
Feather Icons
v4.29
🌐
ng-bootstrap
v21
🗓
Flatpickr
v4.6

Why Adminox

Everything You Need, Nothing You Don't

A focused set of features that accelerate real projects, not a bloated kitchen-sink.

🧩

Fully Modular Architecture

Lazy-loaded route modules keep your initial bundle tiny. Every page section is an independent Angular module you can include or strip as needed.

🖥

6 Layout Modes

Switch between Vertical, Horizontal, Dark Sidebar, Light Topbar, Condensed Nav, and Boxed Width — all at runtime via the built-in theme customizer.

🔁

NgRx Signals State

Reactive global state with NgRx Signals (v21) — the modern successor to NgRx Store. A working Counter demo is included to show the pattern end-to-end.

🔐

JWT Authentication

Login, Signup, Password Reset, and Confirm pages wired to a fake-backend interceptor. Real API integration is one interceptor swap away.

📊

Three Chart Libraries

Dozens of chart types across ApexCharts, Apache ECharts, and Chart.js — line, bar, pie, donut, scatter, heatmap, candlestick and more.

📝

Advanced Form Suite

Multi-step wizard, rich-text CKEditor, drag-and-drop file upload, color picker, date/time picker, range slider, typeahead, and full form validation.

🗂

Built-in App Pages

Calendar, Chat, Email client (Inbox / Read / Compose), Project list, Task list, and Kanban board — fully working Angular components, not static mockups.

📱

Fully Responsive

Every layout adapts seamlessly from 320 px mobile to 4K displays. Bootstrap 5's grid system and flexbox utilities do the heavy lifting.

Great DX out of the Box

Prettier formatting, strict TypeScript, standalone components, HTTP interceptors, AuthGuard, Cookie service, and Loader service — all pre-configured.

All Included Pages

40+ Production-Ready Pages

From a polished dashboard to error pages — every screen your admin panel needs is already built.

Layout System

6 Layout Modes, One Codebase

Switch between any layout at runtime using the built-in right-sidebar customizer — no code changes needed.

Data Visualization

Three World-Class Chart Libraries

Pick the right tool for every visualization scenario — all pre-integrated and ready to populate with real data.

📊

ApexCharts

Modern SVG-based charts with smooth animations. The go-to choice for interactive business dashboards.

Line Bar Area Donut Radar Candlestick Heatmap
📈

Apache ECharts

Powerhouse chart library from Apache — handles millions of data points with GPU-accelerated Canvas rendering.

Line Bar Scatter Pie Gauge Treemap
📉

Chart.js

The most widely adopted open-source chart library. Lightweight, flexible, and universally understood by developers.

Line Bar Pie Doughnut Bubble Polar

UI Component Library

Every Component You'll Ever Need

From basic buttons to advanced drag-and-drop interactions — all included and Angular-ready.

Dashboard Widgets Stat Cards Progress Bars User Profile Cards Accordions Buttons & Groups Bootstrap Modals Dropdowns Tooltips Alerts Badges Pagination Tabs & Pills Spinners Toasts Typeahead ng-select Color Picker Date Picker Range Slider File Upload (Dropzone) Rich Text Editor (CKEditor) Form Wizard Form Validation Kanban Board Drag & Drop Image Gallery Nestable Lists Alertify Notifications FullCalendar Feather Icons Unicons Sortable Tables Activity Timeline Invoice Pricing Tables Smooth Scrollbar Loader / Preloader

Quick Start

Up and Running in 3 Steps

Node.js 18+ and the Angular CLI are the only prerequisites.

1

Clone or Unzip

Grab the source from your download and navigate into the app folder.

# Clone the repository (or unzip your download)
cd adminox/app
2

Install Dependencies

Uses npm with an enforced lockfile for reproducible installs.

# Install all packages (requires Node 18+)
npm install
3

Start the Dev Server

Open http://localhost:4200 in your browser and you're live.

# Starts Angular dev server with HMR
npm start

Codebase

Clean, Predictable Folder Structure

Everything lives where you expect it — no surprises when you open the project for the first time.

src/app/
├── account/ # Auth pages (login, signup, reset, confirm)
├── core/ # Guards, interceptors, services, models
│ ├── guards/ # AuthGuard
│ ├── helpers/ # JWT, Error, Loader, FakeBackend interceptors
│ └── services/ # AuthService, CookieService, EventService
├── layouts/ # Vertical & Horizontal layouts, Topbar, Sidebar
├── pages/ # All feature pages (lazy-loaded)
│ ├── advanced/ # Alertify, Dragula, Gallery, Slider, Nestable
│ ├── apps/ # Calendar, Chat, Email, Project, Tasks
│ ├── charts/ # ApexCharts, ECharts, Chart.js
│ ├── dashboard/ # Main analytics dashboard
│ ├── elements/ # Bootstrap UI, Accordions, Buttons, Pagination
│ ├── form/ # Basic, Advanced, Validation, Wizard, Editor
│ ├── icons/ # Feather Icons, Unicons
│ ├── other/ # Profile, Invoice, Pricing, Error pages
│ ├── tables/ # Basic & Advanced (sortable) tables
│ └── widgets/ # Widget showcase page
└── shared/ # Directives, pipes, shared UI components, widgets

FAQ

Frequently Asked Questions

Which Angular version does Adminox use?
Adminox is built on Angular 22 with standalone components and the new Angular build system (@angular/build). TypeScript 6.0 and the latest Angular CLI are used throughout.
Is this template fully responsive?
Yes. Every page and layout is built on Bootstrap 5's grid and flexbox utilities, and has been tested from 320 px mobile screens up to 4K displays. The sidebar collapses to an off-canvas drawer on small screens.
How is authentication handled?
The template ships with a fake-backend HTTP interceptor that simulates a JWT API so you can explore the full auth flow without a server. To connect a real API, replace the interceptor or point the auth service to your endpoint — no other changes are needed.
Can I switch layout modes programmatically?
Yes. Layout state is stored as a service and persisted to cookies. The right-sidebar customizer exposes buttons that call the service, but you can call the same service methods from anywhere in your code to switch layouts, sidebar themes, or sidebar widths.
What state management solution is used?
NgRx Signals (v21) — the modern, signal-based successor to NgRx Store. A counter demo page shows the full pattern: store definition, computed signals, and updaters. Angular's built-in signal() and computed() primitives are used for local component state.
How do I add a new page or route?
Create an Angular standalone component, add it to the relevant feature routing file (e.g. pages/other/other-routing.module.ts), and add a menu entry in layouts/shared/menu/menu.ts. That's it — the sidebar and horizontal menu will pick up the new route automatically.
Does it support Server-Side Rendering (SSR)?
The current release is a Client-Side Rendering (CSR) SPA. Angular 22 has excellent SSR support via Angular Universal; the architecture is fully compatible, and SSR can be added by running ng add @angular/ssr and reviewing browser-only dependencies.
Which package manager is required?
The project specifies npm 11.13+ as packageManager in package.json. You can also use pnpm or Yarn, but you may need to delete package-lock.json first.
Angular 22 — Production Ready

Start Your Project Today

Skip months of boilerplate. Adminox gives you a polished, production-ready foundation so you can focus on what makes your product unique.

⚡ Get Started