Project Awesome project awesome
♥

Free Templates > ng-matero

Angular Material admin dashboard template.

Package 1.5k stars GitHub

NG-MATERO

Ng-Matero is an Angular admin template made with Material components.

CodeFactor npm GitHub Release Date prettier GitHub license Gitter docs Material Extensions Financial Contributors on Open Collective

✨ Features

  • Material Extensions
  • Schematics support
  • Modern design style
  • Multiple admin layout
  • Powerful color system
  • Rich CSS helpers
  • Dark mode support
  • RTL support
  • Internationalization
  • Authentication
  • HTTP interceptors
  • Permissions management

📖 Documentation

English | 简体中文

📦 Compatibility

Which version to use?

Angular Material Ng-Matero Extensions
v21 v21 21.x.x 21.x.x
v20 v20 20.2.x 20.4.x
v19 v19 19.2.x 19.5.x
v18 v18 18.3.x 18.6.x
v17 v17 17.2.x 17.4.x
v16 v16 16.3.x 16.3.x
v15 v15 15.3.x 15.6.x
v14 v14 14.3.x 14.8.x
v13 v13 13.1.x 13.3.x
v12 v12 12.8.x 12.10.x
v11 v11 11.3.x 11.5.x
v10 v10 10.4.x 10.16.x
v9 v9 9.7.x 9.11.x
v8 v8 0.16.x 0.9.x

🔧 Installation

The project has supported ng add yet.

$ ng new <project-name>
$ cd <project-name>
$ ng add ng-matero

If you have multiple apps in the projects folder. You should specify the project name. Multi-project support is only available in v21 and above.

$ ng add ng-matero --project=<project-name>

You can also git clone the starter repo to start. But it's not recommended.

$ git clone --depth=1 git@github.com:ng-matero/starter.git <project-name>
$ cd <project-name>
$ npm install

⚙️ Schematics

You can use the ng-matero schematics to generate a module or a page.

Module schematic

Generate a lazy loaded module.

$ ng g ng-matero:module <module-name>

The new module will be created in the routes folder, you can also customize the folder name (e.g. pages).

$ ng g ng-matero:module <module-name> --module-root=pages

Page schematic

Generate a page component in the module.

$ ng g ng-matero:page <page-name> -m=<module-name>

Generate an entry component (for dynamic content like Dialogs, without route config) in the page component.

$ ng g ng-matero:page <page-name>/<entry-component-name> -m=<module-name> -e=true

Example

Just two steps after initializing the project, you can get a route page.

$ ng g ng-matero:module abc
$ ng g ng-matero:page def -m=abc

Take a look at http://localhost:4200/#/abc/def, enjoy it!

💻 Development

$ git clone git@github.com:ng-matero/ng-matero.git
$ cd ng-matero
$ npm install
$ npm run start

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

🗺 Roadmap

Check projects to know the develop plans.

🤝 Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

📃 License

MIT

Back to Angular