kevinjh07/angular-material-template

Responsive Angular Material admin application template built on top of Angular, Angular Material and other open-source libraries.

Angular Material Starter Template

Angular Material Starter Template is a free template built with Angular and Angular Material. You can use it out of the box without having to change any file paths. Everything you need to start development on an Angular project is here.

Angular Material starter template has been built with the official style guide in mind, which means it promotes a clean folder structure and separation of concerns. The material template is fully responsive and contains the fundamental building blocks of a scalable Angular application:

Authentication module with login, logout and password reset components Responsive Admin dashboard with sidebar Account area with change password component All Angular Material components In addition to Angular, other well-known open-source libraries such as rxjs, moment and ngx-logger are also included.

This application template came as a result of several applications that I have developed over the past few years.

Having mostly used Angular Material component, I wanted to create a starter template to save time for greenfield projects. I developed it based on user feedback and it is a powerful Angular admin dashboard, which allows you to build products like admin panels, content management systems (CMS) and customer relationship management (CRM) software.

Starter Template Features

Clean folder structure Core module Shared module Example feature modules Lazy-loaded feature modules Global error-handling Error logging with ngx-logger (logging to browser & remote API) HTTP Interceptors to inject JWT-tokens Authentication and role guards (for Role-based access) Shows spinner for all HTTP requests Angular flex layout Browser Support

At present, the template aims to support the last two versions of the following browsers:

Chrome Firefox Microsoft Edge Safari Opera

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.