materialize-admin-angular — Angular 后台模板

SHA-256: 55c4dd24bf22bf1dec6e44cc0be2dd68a83a61c3fad0f7e4a80aa0787f557a4c

2026-10-01T13:27:53.607Z

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

Materialize Admin / Angular is the Angular implementation of the Materialize 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 Materialize 2.2 (@materializecss/materialize). 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/materialize-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
- Materialize 2.2 (@materializecss/materialize)
- 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

Materialize 2.x publishes a Sass entry that forwards partials it does not ship, so `src/styles.scss` consumes the prebuilt stylesheet instead and delivers the brand identity through tokens and helper classes. 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 Materialize 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/materialize-admin-react
- Vue 3: https://github.com/danilo62x/materialize-admin-vue3
- Laravel 11 + Blade: https://github.com/danilo62x/materialize-admin-laravel
- Static HTML: https://github.com/danilo62x/materialize-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=materialize-admin-angular

## License

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