๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Creative Tim UI - 300+ shadcn/ui Blocks & Components Ready for v0, Lovable, Replit.
Explore Now

Material Dashboard Angular

Custom development Preview Docs
Download PRO Version
Material Dashboard Angular Image
Docs
Creative Tim Club ๐Ÿ”ฅ Access to all our current and future products

Material Dashboard Angular

Free Bootstrap 4 Angular 14 Admin Template

· 4.90/5 (599 Reviews)

MIT License

Upgrade to PRO Free Download

Free Bootstrap 4 Admin Angular 14 Template

Product description


Material Dashboard Angular is a free Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.

Material Dashboard Angular is built with Angular 14 and makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.

This product came as a result of users asking for a material dashboard after we released our successful Material Kit and Material Dashboard. We developed it based on your feedback and it is a powerful bootstrap admin dashboard, which allows you to build products like admin panels, content managements systems and CRMs.

Material Dashboard comes with 5 color filter choices for both the sidebar and the card headers (blue, green, orange, red and purple) and an option to have a background image on the sidebar.

Special thanks go to:

We are very excited to share this dashboard with you and we look forward to hearing your feedback!

You can find the Github Repo here.
Product certified by: Creative Tim
Material Dashboard Angular - Angular 2+ Structure with TypeScript
Material Dashboard Angular - Crafted with Bootstrap - the most popular Front End Framework
Material Dashboard Angular - Sass Files for Professional Front End Developers
Material Dashboard Angular - Fully Coded and Responsive HTML5
Downloads
172,786
Version
2.8.0
Changelog
view
Updated
3 years ago
Released
8 years ago
Reviews
See 599 Reviews
Star
Handcrafted Elements
60
Customized Plugins
2
Example Pages
3
Community Support
Documentation
Fully Responsive

Upgrade to PRO Version

Get more power with Material Dashboard Pro Angular. It has a lot more features compared to the free version. We hope you will create awesome websites/templates with this product!

What is in Demo? What is in PRO Version?
Elements 60 200
Plugins 2 15
Examples Pages 3 6
Full Coded
Documentation
SASS Files
Designer Files
Premium Support
Material Dashboard Pro Angular Image
Live Preview Upgrade to PRO

We are here to help you!

202 Web Developers commented on this product

Custom Development Discord Server

marcos.ribeiro
  • downloaded
7 years ago

How can i change de color of active menu in Material Dashboard Free?

chelaru_ciprian
  • downloaded

@marcos.ribeiro in app.component.html you have data-color='red'. Best, Ciprian
7 years ago

tanluutrong2206
  • downloaded

@chelaru_ciprian I cant find data-color in app.component.html. Can you explain more about your solution. Thank you a lot :)
7 years ago

chelaru_ciprian
  • downloaded

@tanluutrong2206 on line 2 you have: <div class="sidebar" data-color='red' data-image="">, right? Best, Ciprian
7 years ago

ruanureez
  • downloaded
7 years ago

"Material Dashboard Angular2 FREE BOOTSTRAP 4 ANGULAR 5 ADMIN TEMPLATE" What is it now? Angular 2 Or Angular 5 Or angular 1000??

chelaru_ciprian
  • downloaded

Hi, @ruanureez ! Thank you for pointing this issue to us. It is built with Angular 5 and at the end of the week, we will change the title. All the best, Ciprian
7 years ago

ruanureez
  • downloaded
7 years ago

Hi @chelaru_ciprian , Awesome. Thanks for letting me know. Looking forward to it! All the best, Ruan

drobbed
  • downloaded
7 years ago

I am getting the following after after running npm install and ng serve: Cannot read property 'write' of undefined TypeError: Cannot read property 'write' of undefined at UI.write (C:\dev\material-dashboard-angular-v2.1.0\node_modules\@angular\cli\ember-cli\lib\ui\index.js:56:23) at UI.writeLine (C:\dev\material-dashboard-angular-v2.1.0\node_modules\@angular\cli\ember-cli\lib\ui\index.js:69:8) at Class.run (C:\dev\material-dashboard-angular-v2.1.0\node_modules\@angular\cli\tasks\serve.js:237:12) at check_port_1.checkPort.then.port (C:\dev\material-dashboard-angular-v2.1.0\node_modules\@angular\cli\commands\serve.js:123:26) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7)

chelaru_ciprian
  • downloaded

Hi, @drobbed ! Thank you for using our product. Can you tell me what OS do you use? Best, Ciprian
7 years ago

kirankumar.kalisetty
  • downloaded
7 years ago

This template is designed with Angular Material or Bootstrap or both. If both where you add bootstrap css in this template?

chelaru_ciprian
  • downloaded

Hi, @kirankumar.kalisetty ! Thank you for using our product and sorry for the late response. The bootstrap scss is imported in src/assets/scss/material-dashboard.scss. All the best, Ciprian
7 years ago

rammeena33 7 years ago

Can we customize and sell this dashboard with our own functioning ?

chelaru_ciprian
  • downloaded

Hi, @rammeena33 . Yes, you can customize and sell this product with one condition, to keep our header from scss file. All the best, Ciprian
7 years ago

rimhatti
  • downloaded
7 years ago

How could I upgrade it to Angular6

chelaru_ciprian
  • downloaded

Hi, @rimhatti ! Thank you for using our product. Use this command: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save. Best, Ciprian
7 years ago

ุฏ9gl
  • downloaded
7 years ago

Hi, is there any RTL supporting plan ?

chelaru_ciprian
  • downloaded

Hi. The RTL support is a feature for the PRO version only. Best, Ciprian
7 years ago

omotayoblessing11
  • downloaded
7 years ago

please can you teach me how to run this project

chelaru_ciprian
  • downloaded

@omotayoblessing11 check this tutorial: https://demos.creative-tim.com/material-dashboard-angular2/documentation/tutorial. See the getting started area. Best, Ciprian
7 years ago

omotayoblessing11
  • downloaded
7 years ago

i have done that but it showing this inside terminer > [email protected] start C:\wampe\www\paymyrentproject\paymyrent\admin > ng serve 'ng' is not recognized as an internal or external command, operable program or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: `ng serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\GHOSTCODE\AppData\Roaming\npm-cache\_logs\2018-10-05T15_57_19_281Z-debug.log

chelaru_ciprian
  • downloaded

@omotayoblessing11 try with npm start. Best, Ciprian
7 years ago

chelaru_ciprian
  • downloaded

Have you run this command: npm install -g @angular/cli@latest?
7 years ago

You have to be logged in to post a comment. Login here.

  1. Home
  2. All Templates
  3. Material Dashboard Angular

2,784,001 accounts

4,859,835 downloads

309 products

Join our newsletter

Your subscription could not be saved. Please try again.
Your subscription has been successful.

Company

Help and Support

Tailwind Resources

Developer Resources

© 2025 Creative Tim, all rights reserved. Made with for a better web.