Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
December 15, 2021 21:34
March 1, 2023 12:58
October 14, 2019 23:19
April 14, 2019 22:41
April 10, 2019 13:42
March 1, 2023 12:30
November 15, 2021 21:26


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


  • 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


📦 Compatibility

Which version to use?

Angular Material Ng-Matero Extensions
v15 v15 15.x.x 15.x.x
v14 v14 14.3.0 14.6.4
v13 v13 13.1.1 13.3.2
v12 v12 12.8.0 12.10.2
v11 v11 11.3.2 11.5.1
v10 v10 10.4.1 10.16.5
v9 v9 9.7.2 9.11.14
v8 v8 0.16.0 0.9.3

🔧 Installation

The project has support ng add yet.

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

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

$ git clone --depth=1 <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 routes folder, it will be added in routes.module and its route declaration will be added in routes-routing.module automaticly.

Page schematic

Generate a page component in the module.

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

Generate a entry component in the page component.

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


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
$ cd ng-matero
$ npm install
$ npm run hmr

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]



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

📃 License