foundation-admin-angular — Angular 后台模板

SHA-256: 97ff8fc65c3ffbaf797d6a4cb27de2be8f3fd038c5ced807a0dce4f613e52cc4

2026-10-01T14:27:08.662Z

# Foundation 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)

Foundation Admin / Angular is the Angular implementation of the Foundation 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 Foundation Sites 6.8 (prebuilt stylesheet). 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/foundation-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
- Foundation Sites 6.8 (prebuilt stylesheet)
- 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, _compat.scss
```

## Theming and customization

Foundation comes in prebuilt (`foundation-sites/dist/css/foundation.min.css`), which avoids the Sass resolution friction of its source entry. `src/styles.scss` layers the theme on top of it. 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. `_compat.scss` implements the utility vocabulary the markup shares with the Tailwind original and maps the tokens onto the framework components, so cards, tables and form controls follow the theme.

## 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 Foundation 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/foundation-admin-react
- Vue 3: https://github.com/danilo62x/foundation-admin-vue3
- Laravel 11 + Blade: https://github.com/danilo62x/foundation-admin-laravel
- Static HTML: https://github.com/danilo62x/foundation-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=foundation-admin-angular

## License

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