Angular Material Starter Template
Angular Material Application Template is a free template built with Angular 8 and Angular Material 8. You can use it out of the box without having to change any file paths. Everything you need to start development on an Angular 8 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:
- Login component
- Password reset component
- Responsive Admin dashboard with sidebar
- Account area with change password component
- Log out
- All Angular Material components
In addition to Angular 8, 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 we have developed over the past few years. We have always used Angular Material components and wanted to create a starter template to save time for greenfield projects. We 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
Table of Contents
Demo
Quick start
Start by downloading the template from one of these locations:
This project was generated with Angular CLI and currently uses version 8.x and Angular 8.x.
Follow the steps below to start using the template.
- Install NodeJS from NodeJs Official Page.
- Open Terminal (Download Git Bash for Windows or use cmd)
- Go to your file project
- Make sure you have installed Angular CLI already. If not, please install.
- Run in terminal:
npm install - Run
ng servefor a dev server. Navigate tohttp://localhost:4200/. The app will automatically reload if you change any of the source files. - Use your favourite IDE to rebrand the project. Just search and replace all occurances of
angular-material-templatewith your project name.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
Supported Browsers
At present, we officially aim to support the last two versions of the following browsers:
What's included
Within the download you'll find the following directories and files:
├── LICENSE
├── README.md
├── angular.json
├── e2e
├── package-lock.json
├── package.json
├── src
│ ├── app
│ │ ├── about
│ │ │ ├── about-home
│ │ │ │ ├── about-home.component.css
│ │ │ │ ├── about-home.component.html
│ │ │ │ ├── about-home.component.spec.ts
│ │ │ │ └── about-home.component.ts
│ │ │ ├── about-routing.module.ts
│ │ │ └── about.module.ts
│ │ ├── account
│ │ │ ├── account-routing.module.ts
│ │ │ ├── account.module.ts
│ │ │ ├── change-password
│ │ │ │ ├── change-password.component.css
│ │ │ │ ├── change-password.component.html
│ │ │ │ └── change-password.component.ts
│ │ │ ├── profile
│ │ │ │ ├── profile.component.css
│ │ │ │ ├── profile.component.html
│ │ │ │ └── profile.component.ts
│ │ │ └── profile-details
│ │ │ ├── profile-details.component.css
│ │ │ ├── profile-details.component.html
│ │ │ └── profile-details.component.ts
│ │ ├── app-routing.module.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── auth
│ │ │ ├── auth-routing.module.ts
│ │ │ ├── auth.module.ts
│ │ │ ├── login
│ │ │ │ ├── login.component.css
│ │ │ │ ├── login.component.html
│ │ │ │ └── login.component.ts
│ │ │ ├── password-reset
│ │ │ │ ├── password-reset.component.css
│ │ │ │ ├── password-reset.component.html
│ │ │ │ └── password-reset.component.ts
│ │ │ └── password-reset-request
│ │ │ ├── password-reset-request.component.css
│ │ │ ├── password-reset-request.component.html
│ │ │ └── password-reset-request.component.ts
│ │ ├── core
│ │ │ ├── core.module.ts
│ │ │ ├── guards
│ │ │ │ ├── admin.guard.spec.ts
│ │ │ │ ├── admin.guard.ts
│ │ │ │ ├── auth.guard.spec.ts
│ │ │ │ ├── auth.guard.ts
│ │ │ │ └── module-import.guard.ts
│ │ │ ├── interceptors
│ │ │ │ ├── auth.interceptor.ts
│ │ │ │ └── spinner.interceptor.ts
│ │ │ └── services
│ │ │ ├── auth.service.ts
│ │ │ ├── globar-error.handler.ts
│ │ │ ├── notification.service.ts
│ │ │ ├── spinner.service.spec.ts
│ │ │ └── spinner.service.ts
│ │ ├── custom-material
│ │ │ ├── custom-material.module.ts
│ │ │ └── select-check-all
│ │ │ ├── select-check-all.component.css
│ │ │ ├── select-check-all.component.html
│ │ │ └── select-check-all.component.ts
│ │ ├── customers
│ │ │ ├── customer-list
│ │ │ │ ├── customer-list.component.css
│ │ │ │ ├── customer-list.component.html
│ │ │ │ └── customer-list.component.ts
│ │ │ ├── customers-routing.module.ts
│ │ │ └── customers.module.ts
│ │ ├── dashboard
│ │ │ ├── dashboard-home
│ │ │ │ ├── dashboard-home.component.css
│ │ │ │ ├── dashboard-home.component.html
│ │ │ │ └── dashboard-home.component.ts
│ │ │ ├── dashboard-routing.module.ts
│ │ │ └── dashboard.module.ts
│ │ ├── icons
│ │ │ ├── icons
│ │ │ │ ├── icons.component.css
│ │ │ │ ├── icons.component.html
│ │ │ │ ├── icons.component.spec.ts
│ │ │ │ └── icons.component.ts
│ │ │ ├── icons-routing.module.ts
│ │ │ └── icons.module.ts
│ │ ├── shared
│ │ │ ├── confirm-dialog
│ │ │ │ ├── confirm-dialog.component.css
│ │ │ │ ├── confirm-dialog.component.html
│ │ │ │ └── confirm-dialog.component.ts
│ │ │ ├── content-placeholder-animation
│ │ │ │ ├── content-placeholder-animation.component.css
│ │ │ │ ├── content-placeholder-animation.component.html
│ │ │ │ └── content-placeholder-animation.component.ts
│ │ │ ├── footer
│ │ │ ├── layout
│ │ │ │ ├── layout.component.css
│ │ │ │ ├── layout.component.html
│ │ │ │ └── layout.component.ts
│ │ │ ├── mocks
│ │ │ │ └── spinner-consumer.ts
│ │ │ ├── pipes
│ │ │ │ ├── limit-to.pipe.spec.ts
│ │ │ │ ├── limit-to.pipe.ts
│ │ │ │ ├── local-date.pipe.spec.ts
│ │ │ │ ├── local-date.pipe.ts
│ │ │ │ ├── yes-no.pipe.spec.ts
│ │ │ │ └── yes-no.pipe.ts
│ │ │ ├── shared.module.ts
│ │ │ └── validators
│ │ │ └── autocompleteSelectionValidator.ts
│ │ ├── typography
│ │ │ ├── typography
│ │ │ │ ├── typography.component.css
│ │ │ │ ├── typography.component.html
│ │ │ │ ├── typography.component.spec.ts
│ │ │ │ └── typography.component.ts
│ │ │ ├── typography-routing.module.ts
│ │ │ └── typography.module.ts
│ │ └── users
│ │ ├── user-list
│ │ │ ├── user-list.component.css
│ │ │ ├── user-list.component.html
│ │ │ └── user-list.component.ts
│ │ ├── users-routing.module.ts
│ │ └── users.module.ts
│ ├── assets
│ │ ├── favicon
│ │ └── user.png
│ ├── browserslist
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── index.html
│ ├── karma.conf.js
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── tslint.json
├── tsconfig.json
└── tslint.json
Resources
- Demo: http://demo.onthecode.co.uk/angular-material-template
- Download Page: https://onthecode.co.uk/product/angular-material-template
- License Agreement: License Agreement
- Support: Ask onthecode
- Issues: Github Issues
Technical Help
We use GitHub Issues as the official bug tracker for this template. Here are some advices for our users that want to report an issue:
- Make sure that you are using the latest version of the template.
- Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
- Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
If you have questions or need help integrating the product please contact us instead of opening an issue.
Licensing
- Copyright 2019 onthecode (https://onthecode.co.uk/)
- Licensed under MIT License Agreement