bootstrap-admin-angular — Angular 后台模板

SHA-256: 93f1ff2f4b02e1c210fe68fcafa4398c5e064d467d5ad8c5634103cd14a765d3

2026-10-01T14:09:01.470Z

# Bootstrap Admin / Angular

[Leia em português](./README.pt-BR.md)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE) ![Free](https://img.shields.io/badge/price-free-brightgreen)

Bootstrap Admin / Angular is the Angular implementation of the Bootstrap admin layout: 5 sibling templates share the same 25 screens and the same visual identity, one per stack. This one is built with Angular 19 standalone components, styled with Bootstrap 5.3 compiled from Sass. Authentication and data are mocked, so the whole application runs without a backend. It ships with a light and a dark theme, three languages and an installable PWA setup.

Live preview: https://template.dev.br/preview/bootstrap-admin-angular/

## Pages included

25 standalone components in `src/app/pages/`:

- Landing: public marketing page with hero, feature and pricing sections
- Login: sign-in form with validation and mock credentials
- Register: account creation form
- ForgotPassword: request form for a reset link
- ResetPassword: form to set a new password
- Dashboard: KPI stat cards with sparklines, charts and recent activity
- Charts: analytics page with bar, area and donut charts (ApexCharts)
- Forms: inputs, selects, date picker, file upload and inline validation
- Tables: data table with sorting, filtering, pagination and row selection
- Components: catalog of the base UI components
- UiAdvanced: modals, tabs, toasts and other composite widgets
- Typography: type scale, headings and text helpers
- Integrations: third-party service cards with toggles
- Profile: user page with personal data and activity
- Pricing: plan comparison
- Settings: application preferences, theme and language
- Inbox: mail-style app screen with folders and message list
- FileManager: file listing with folders and file actions
- Gallery: image grid
- Invoice: printable invoice detail
- Billing: payment methods and invoice history
- Documentation: in-app reference page for the template
- Maintenance: standalone downtime page
- ComingSoon: standalone pre-launch page
- NotFound: 404 error page

## Tech stack

- Angular 19 with standalone components and the new control flow syntax
- Bootstrap 5.3 compiled from Sass
- TypeScript 5.6 in strict mode
- `@angular/service-worker` 19.2 for the PWA build
- Angular Router with lazy loaded routes and a guard on the app area
- Transloco 8.3 for i18n (en, es, pt-BR)
- ApexCharts 5 via ng-apexcharts 1.15
- TanStack Angular Table 8.21
- Quill 2 through ngx-quill 27 for rich text
- flatpickr 4.6 date picker
- Reactive forms for validation

## Requirements

- Node.js 18 or newer
- npm (the Angular CLI comes from the local devDependencies)

## Getting started

```bash
npm install
npm start      # ng serve at http://localhost:4200
```

Authentication is simulated in an Angular service, so no backend is required. Demo credentials:

- `[email protected]` / `admin123`
- `[email protected]` / `user123`

## Build for production

```bash
npm run build
```

The Angular CLI writes the production build to `dist/`. The service worker is enabled in the production configuration, so test the PWA against the built output rather than `ng serve`.

## Project structure

```
public/
├── assets/i18n/       en.json, es.json, pt-BR.json
└── manifest.webmanifest, pwa-*.png
src/
├── app/
│   ├── components/    layout (header, sidebar, footer) and shared UI
│   ├── core/          services, guards and mock data
│   ├── pages/         25 standalone page components
│   ├── app.routes.ts  route table with lazy loading
│   └── app.config.ts  providers (router, transloco, service worker)
└── styles.scss
```

## Theming and customization

`src/styles.scss` overrides the Bootstrap Sass variables before `@import "bootstrap/scss/bootstrap"`: `$primary` (#465fff), the state colors, `$font-family-sans-serif` (Outfit), the radius scale and `$enable-shadows: false`. Below that sit the runtime design tokens, declared as CSS custom properties: the brand ramp (`--color-brand-25` through `--color-brand-950`, with 500 as the primary #465fff), the state colors, and semantic surface tokens under the `--tx-` prefix (sidebar, header, card, border, text). Dark mode swaps the `--tx-` values at runtime, driven by a class on the root element. To rebrand the template, change the brand ramp and the `--tx-` values together. Changing `$primary` recompiles the framework components; changing the brand ramp updates everything driven by tokens, so keep the two in sync.

## Internationalization

Three locales ship in `public/assets/i18n/`: English, Spanish and Brazilian Portuguese. Transloco loads them at runtime and the header switcher persists the user choice.

## The same layout in other stacks

This repository is one of 5 implementations of the same Bootstrap admin layout. Every one has the same 25 views and the same visual identity, and all of them are free:

- React 19: https://github.com/danilo62x/bootstrap-admin-react
- Vue 3: https://github.com/danilo62x/bootstrap-admin-vue3
- Laravel 11 + Blade: https://github.com/danilo62x/bootstrap-admin-laravel
- Static HTML: https://github.com/danilo62x/bootstrap-admin-html

The full catalog of free and paid templates is at https://template.dev.br

## Support this project

This template is free and MIT licensed. If it saves you time, you can support the work with a donation at https://template.dev.br/doar?template=bootstrap-admin-angular

## License

[MIT](./LICENSE), copyright 2026 Danilo Quinelato.