APIC Angular 22 Documentation
APIC Angular 22 Dashboard Admin Bootstrap Template is a responsive admin dashboard template built using Angular, Bootstrap, SCSS and TypeScript. It comes with six different layout options including vertical, horizontal and box layouts, and lots of reusable and beautiful UI elements, widgets and more features.
This guide explains how to install, run and build the template, how the project is organised, how to change colours and themes, and how to add pages. Read it before you start customizing; it will save you time.
The template supports custom admin panels, super admin dashboards, SaaS Angular applications, Angular CRM admin panels, project management, accounting, eCommerce, analytics and sales dashboards.
What is APIC Angular 22?
APIC is an Angular admin dashboard template for developers who want a head start on a back-office interface. It gives you authentication pages, charts UI, components, UI kits, utilities and application UIs such as task list, chat, mailbox, notes, Kanban board and invoices, all as standalone Angular components on top of Bootstrap 5.3 and SCSS.
The code is well structured, which makes installation, setup and customization easy. The template is completely responsive and works across all modern browsers and mobile devices. Your purchase includes detailed documentation (this page), one year of free support and unlimited updates.
An HTML version is also available: APIC Bootstrap Admin Dashboard HTML Template.
Key Features of the Angular Admin Dashboard
Everything included in the APIC Angular 22 template at a glance.
Beyond the list: the vertical, horizontal and box layouts are switchable at runtime, the sidebar ships in dark, light, condensed and colored styles, and RTL loads a dedicated stylesheet bundle. Forms include validation and wizard examples, tables include sorting, filtering and Excel/PDF export, and the advanced UI section adds drag and drop, range slider, rating, countdown, lightbox, SweetAlert2 and alertify notifications.
Built for Every Kind of Admin Dashboard
Custom admin panels, Angular bootstrap dashboards, super admin dashboards, accounting dashboards, project management, eCommerce admin panels, analytics admin panels, sales dashboards, Angular CRM admin panels and SaaS-based interfaces.
Custom & Super Admin Panels
Start from a finished layout, sidebar, topbar and theme instead of a blank project.
SaaS Angular Applications
Reuse the widgets, charts, tables and forms as your SaaS interface.
CRM & Project Management
Contacts, Kanban board, task list, notes and calendar cover the CRM basics.
eCommerce, Sales & Accounting
Invoices, advanced tables, pricing and analytics charts for orders and billing.
Built With
The core stack is Angular 22, Bootstrap 5.3, TypeScript and ng-bootstrap 21. Everything else (charts, calendar, editor, pickers) is listed under Dependencies.
Browser Support
APIC is tested on modern desktop and mobile browsers. Bootstrap 5.3's responsive grid keeps the interface usable from small phones to large monitors.
Getting Started
You need Node.js and the Angular CLI. There is no backend or database to install; everything runs against local fake data until you connect your API.
Open the project folder
Unzip and move into apic-angular-22.
cd apic-angular-22
Install dependencies
Installs every runtime and dev dependency listed in package.json.
npm install
Run the dev server
Open http://localhost:4200 in your browser. The app reloads on every change.
npm start
Build for production
Writes an optimized bundle to dist/. Configure your host to serve index.html for unknown routes.
npm run build
Run the unit tests
Tests run with Vitest through the Angular CLI.
npm test
Folder Structure
Every screen and shared element sits where you would expect it: features by domain under pages/, layout chrome under layouts/, cross-cutting code under core/ and shared/.
├── account/ # Login, signup, reset password, lock screen, error pages
├── core/ # Guards, interceptors, models, services
│ ├── guards/ # authGuard
│ ├── helpers/ # JWT, error, loader and fake-backend interceptors
│ └── services/ # Auth, theme, chart theme, cookie, loader
├── layouts/ # Vertical & horizontal layouts, sidebar, topbar, menu
│ └── shared/menu/menu.ts # Sidebar menu definition
├── pages/ # Feature pages (lazy-loaded)
│ ├── dashboards/ # Multi-purpose dashboard
│ ├── apps/ # Chat, mailbox, notes, tasks, Kanban, invoices, contacts, calendar
│ ├── page/ # Starter, timeline, gallery, FAQs, pricing
│ ├── components/ # Bootstrap UI building blocks
│ ├── advanced/ # Drag & drop, nestable, rating, lightbox, SweetAlert2, alertify…
│ ├── form/ # Elements, validation, wizard, editor, uploads
│ ├── tables/ # Bootstrap, advanced, sort, export, filter
│ ├── charts/ # ApexCharts, Chart.js, ECharts, ngx-charts
│ └── icons/ # MDI, Dripicons, Font Awesome, Themify, Unicons
├── shared/ # Directives, services, UI, widgets, fake data
└── types/ # Ambient type declarations
Colors & SCSS Variables
Theme colours are Bootstrap 5.3 Sass variables in src/assets/scss/_bootstrap-overrides.scss. Change a value there and every button, badge, alert and chart follows.
Editing a colour
$primary: #3051d3,
$secondary: #564ab1,
$success: #3ddc97,
Other SCSS files: _variables.scss holds APIC-only variables (sidebar width, header height…), _theme.scss holds light/dark colour tokens, and app.scss / app-rtl.scss are the two compiled entry points.
Dark Mode, RTL & Sidebar Themes
Switch light and dark mode, LTR and RTL, vertical and horizontal layout, boxed width and sidebar style from the theme customizer.
Dark mode. Colours are CSS custom properties scoped to data-bs-theme="light" and data-bs-theme="dark" on <html>, set by ThemeService and remembered in the browser. To add or change a colour, edit the light block and the dark block in src/assets/scss/_theme.scss.
RTL. The RTL build loads a separate app-rtl stylesheet bundle and sets dir="rtl" on <html>, which suits Arabic, Hebrew and Persian interfaces.
Sidebar. Choose dark, light, condensed (compact) or colored sidebar, plus fluid or boxed width.
--apic-chart-* variables.Layout & Sidebar Menu
A vertical or horizontal layout with topbar, search, notifications and profile dropdown, a right-side customizer, and a content area for the active route. The sidebar is collapsible on desktop and off-canvas on mobile.
Adding a menu item
The sidebar is built from one array. Edit src/app/layouts/shared/menu/menu.ts and both the vertical and horizontal menus update.
label: 'Reports',
icon: 'bx bx-bar-chart',
link: '/reports'
}
Pages & Modules
80+ pages, each a working Angular standalone component, not a mockup. See them live on the preview page.
🏠 Dashboard & Apps
🔐 Authentication
📄 Utility Pages
📝 Forms
📊 Tables & Charts
🎨 Icons
UI Components
A complete Bootstrap 5.3 component set plus advanced widgets for real admin workflows. Every component is a standalone Angular component you can drop into a new page.
Dependencies
The packages APIC is built on, taken from this project's package.json. Dev tooling: @angular/build, @angular/cli, TypeScript 6, Vitest and Prettier.
Angular framework
| Package | Used for |
|---|---|
| @angular/core, common, compiler, forms, router, platform-browser | Angular framework core, routing and forms |
| @angular/animations, @angular/cdk | Animations and component dev kit |
| @angular/localize | i18n support |
| rxjs, tslib | Reactive streams and TypeScript helpers |
UI & layout
| Package | Used for |
|---|---|
| bootstrap, @popperjs/core | CSS and layout framework with positioning engine |
| @ng-bootstrap/ng-bootstrap | Angular-native Bootstrap widgets (modals, dropdowns, tabs, accordion, pagination) |
| @ng-select/ng-select | Select and multi-select dropdown |
| metismenujs | Collapsible sidebar menu |
| simplebar-angular, smooth-scrollbar | Custom scrollbars |
| ng-click-outside | Click-outside directive |
| ngx-owl-carousel-o | Carousel |
| photoswipe | Lightbox and image gallery |
Charts & calendar
| Package | Used for |
|---|---|
| apexcharts, ng-apexcharts | ApexCharts |
| echarts, ngx-echarts | Apache ECharts |
| chart.js | Chart.js |
| @swimlane/ngx-charts, d3-shape | D3-based ngx-charts |
| @fullcalendar/angular, core, bootstrap5 | Calendar app |
Forms & inputs
| Package | Used for |
|---|---|
| @ckeditor/ckeditor5-angular | Rich text editor |
| angularx-flatpickr, flatpickr | Date and time picker |
| ngx-mask | Input masks |
| ngx-color-picker | Color picker |
| ngx-chips | Tag input and typeahead |
| ngx-dropzone | File upload dropzone |
| ng-wizard | Form wizard |
| @angular-slider/ngx-slider, ng2-nouislider, nouislider | Range sliders |
Advanced UI & utilities
| Package | Used for |
|---|---|
| sortablejs, ngx-drag-drop | Drag and drop, sortable lists and Kanban board |
| sweetalert2, alertifyjs | Dialogs and notifications |
| @iconscout/unicons | Unicons icon set |
| xlsx, file-saver, pdfmake | Excel, file and PDF export for tables |
Security & Vulnerabilities
Result of npm audit run against this project's lockfile on 2026-10-10: 15 advisories across 1,058 resolved packages. Severity follows the npm scale: critical, high, moderate and low. Re-run the audit before every release; the numbers change as advisories are published.
Severity levels
Critical
Exploitable with severe impact. Fix or isolate before shipping.
High
Serious weakness. Patch in the next release or remove the feature that uses it.
Moderate
Limited impact or hard to reach. Schedule the update.
Low
Minor issue. Update when convenient. None are reported today.
Advisories by package
| Package | Severity | Dependency | Used by / where in the project | Advisory | Fix (semver) |
|---|---|---|---|---|---|
| tar | Critical | Transitive | @iconscout/unicons → ttf2woff2 → node-gyp → tar (also via make-fetch-happen → cacache). Install-time only. | node-tar: decompression/parse DoS via unlimited input, plus hardlink/symlink path traversal and file overwrite advisories (11 in total) | No fix yet; patched tar needed upstream |
| xlsx | High | Direct | Direct dependency. Imported in the app by src/app/shared/services/fileSave.service.ts for the Excel export on the table pages. Ships in the browser bundle. | Prototype pollution (GHSA-4r6h-8v6p-xvw6, fixed in 0.19.3) and ReDoS (GHSA-5pgg-2g8v-p4x9, fixed in 0.20.2) | Not on npm; install SheetJS 0.20.2+ from its CDN (major bump) |
| @iconscout/unicons | High | Direct | Direct dependency. The Unicons script is imported by the Maintenance page and the Unicons icon demo page. | Inherits the svgo, ttf2woff2 and uuid advisories below | No fix yet; upstream package update needed |
| svgo | High | Transitive | @iconscout/unicons → svgo 1.1.1. Build tooling of the icon package. | removeScripts plugin leaves executable scripts and links intact (3 advisories) | No fix yet |
| ttf2woff2 | High | Transitive | @iconscout/unicons → ttf2woff2. Font conversion tooling. | Inherited from node-gyp | No fix yet |
| node-gyp | High | Transitive | @iconscout/unicons → ttf2woff2 → node-gyp 9.4.1. Native build tooling. | Inherited from make-fetch-happen and tar | No fix yet |
| make-fetch-happen | High | Transitive | @iconscout/unicons → ttf2woff2 → node-gyp → make-fetch-happen. | Inherited from cacache | No fix yet |
| cacache | High | Transitive | @iconscout/unicons → … → node-gyp → make-fetch-happen → cacache. | Inherited from tar | No fix yet |
| css-select | High | Transitive | @iconscout/unicons → svgo (css-select 2.1.0) and → svgstore → cheerio (4.3.0). The css-select 7 used by @angular/build (beasties) is a patched version and is not affected. | Inherited from nth-check | No fix yet |
| nth-check | High | Transitive | @iconscout/unicons → svgo → css-select 2.1.0 → nth-check 1.0.2. The nth-check 2.1.1 and 3.0.1 copies are patched. | Inefficient regular expression complexity (GHSA-rp65-9cf3-cjxr) | No fix yet |
| http-cache-semantics | High | Transitive | @iconscout/unicons → … → node-gyp → make-fetch-happen → http-cache-semantics 4.2.0. | max-stale handling can disclose cross-user cached responses (GHSA-ch52-4w7c-c8xp) | Fix available (non-breaking) |
| uuid | Moderate | Transitive | @iconscout/unicons → uuid 3.4.0. | Missing buffer bounds check in v3/v5/v6 when a buffer is provided (GHSA-w5hq-g745-h8pq) | Fix available (non-breaking) |
| sprintf-js | Moderate | Transitive | @iconscout/unicons → svgo → js-yaml → argparse → sprintf-js. | Denial of service through unbounded precision specifiers (GHSA-hp3w-g68c-fv3c) | No fix yet |
| argparse | Moderate | Transitive | @iconscout/unicons → svgo → js-yaml → argparse. | Inherited from sprintf-js | No fix yet |
| js-yaml | Moderate | Transitive | @iconscout/unicons → svgo → js-yaml 3.15.2. | Inherited from argparse | No fix yet |
What this means for your app
Only xlsx runs in the browser. It powers the Excel export on the Advanced Table page. Prototype pollution and ReDoS matter if you parse spreadsheets from untrusted users; exporting your own data is low risk. To remove the advisory, upgrade to SheetJS 0.20.2 or newer (a major version bump) and re-test the export, or drop the export button.
Thirteen of the fifteen come from one package. Every advisory except xlsx is reached through @iconscout/unicons, so upgrading or replacing that single package clears most of the report.
The rest are tooling. tar, node-gyp, svgo, ttf2woff2 and their parents arrive through @iconscout/unicons and are used when packages are installed or fonts are built, not by the compiled Angular bundle. They are still worth fixing in CI and on build machines. Only two advisories (http-cache-semantics and uuid) have a non-breaking fix today.
npm audit
# Apply non-breaking fixes only
npm audit fix
npm audit fix --force applies semver-major bumps and can break working code. Run the tests and check the Excel export by hand after any major upgrade.Frequently Asked Questions
Answers to the questions we hear most about the APIC Angular 22 admin dashboard template.
General
What is the APIC Angular 22 Dashboard Admin Bootstrap Template?
What can I build with it?
Which Angular version does it run on?
@angular/build toolchain. TypeScript is 6.0 and Bootstrap is 5.3.Is there an HTML version?
Does it work on phones and tablets?
Installation & Setup
What do I need installed before I start?
How do I run the project?
npm install once to install dependencies, then npm start (which runs ng serve) and open http://localhost:4200.How do I build for production?
npm run build. The optimized bundle is written to the dist/ folder, ready to deploy to any static host. Because routes use the HTML5 History API, configure your host to fall back to index.html.What is the demo login?
core/helpers/fake-backend.ts) so you can sign in on the demo without a server. Replace it with your real API when you are ready.Customization
How do I change the brand colours?
src/assets/scss/_bootstrap-overrides.scss; see Colors & SCSS. Every button, badge, alert and chart follows the new values.How do I enable dark mode or RTL?
data-bs-theme, so adding a colour means adding it to both blocks in _theme.scss.How do I add a new page?
src/app/pages/, register its route in that feature's routes file, then add an entry to the sidebar array in src/app/layouts/shared/menu/menu.ts.Can I delete the pages I do not need?
src/app/pages/. Remove the folder, its loadChildren line in app.routes.ts and its sidebar entry.Components, Data & Charts
Which chart libraries are included?
Is the data real?
src/app/shared/fakedata and from the fake backend interceptor, so you can replace it service by service.Licensing & Support
What do I get when I buy?
Can I use it in a commercial product?
Support
Your purchase includes one year of free support and unlimited updates. Check the inline comments at the top of a page component, then this guide, before sending a question. Include your Angular and Node versions and the steps to reproduce.
Ready to Build Your Angular Admin Dashboard?
Get the full APIC Angular 22 source, every page, one year free support and unlimited updates.