Material Dashboard Angular

Material Dashboard Angular

Free Bootstrap 4 Angular 8 Admin Template
· 4.90/5 (422 Reviews)

MIT License

80,029 Downloads
196 Comments
Community Support
6 months Updates
Release: 2 years ago
Update: 5 months ago

60 Handcrafted Elements

2 Customized Plugins

3 Example Pages

Product certified by: Creative Tim

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?
  • Elements · 60
  • Plugins · 2
  • Examples Pages · 3
  • -
  • -
  • -
  • -
What is in PRO Version?
  • Elements · 200
  • Plugins · 15
  • Example Pages · 6
  • + Documentation
  • + SASS Files
  • + Photoshop Files
  • + Sketch Files
Upgrade to PRO

We are here to help you!

196 Web Developers commented on this product

Github Docs FAQ Page

workvirtusa
  • downloaded
2 years ago

Can help me step by step on how to implement this to my project sir? Thanks alot.

alexpaduraru
  • downloaded

@workvirtusa thank you for using our product. Please check the Angular 2 official documentation: https://v2.angular.io/docs/ts/latest/tutorial/ that will give you an overview of how to work with Angular. Also make sure you check our documentation from the archive, showing you how to install run and work with the elements. Hope that helps. Best, Alex!
2 years ago

mohd.afeef
  • downloaded
2 years ago

hi axel i tried to install your project but i cannot run angular cli. though my other angular2 app are working through ng serve cli though i checked >ng version error im finding:cannot find module @angular/platform-browser-dynamic';2.'@angular/core'; please suggest

alexpaduraru
  • downloaded

@mohd.afeef thank you for using our product. We are in the process of converting the current version to CLI, this will be released probably in 1-2 weeks. We didn't try to integrate the current version to CLI so we don't know exactly what is causing that error. Please wait till we are releasing the official version. Hope you understand the situation. Best, Alex!
2 years ago

usmanspecial
  • downloaded
2 years ago

how we can use mongodb and where we can use port . can you please tell us the file or something for these changes. Thanks for this lovely product.

avdbrink
  • downloaded
2 years ago

Hi @alexpaduraru , I've been using the CLI version of this dashboard (https://github.com/sdey0081/material-dashboard-angular-cli) and really love the looks of it. Even have the datatable issue I had before solved. Not sure if that's because I'm using the CLI version now, or just because I'm starting to get a sense of what Angular is all about :) But there still is an issue I can't get fixed. From my main dashboard page I link to other pages and navigation seems okay. But the selected page in the sidebar on the left doesn't change. Any thoughts on how to achieve that?

alexpaduraru
  • downloaded

@avdbrink thank you for the kind words and I'm glad that you've got a way to learn more. Can you please let us know if you made any changes to the default sidebar? On the original archive, it is working fine. Best, Alex!
2 years ago

avdbrink
  • downloaded

Hi @alexpaduraru I did not make any changes to the default sidebar (apart from using the CLI version as mentioned). But I just tried the vanilla version of the repo and it is working fine there indeed. This means something else is broken... I'm going to dive into that one, I probably made a mistake somewhere in the routing... must be the newbie in me :) Best, Arno
2 years ago

abigail.armijo
  • downloaded
2 years ago

Hi! It's possible to show the toggle menu in the left side instead of the right side? and I try to put the toogle menu always visible for hide/show the menu, but when is in large screen the button doesn't do anything what class or function I need to change to hidde/show the menu with a button?

alexpaduraru
  • downloaded

@abigail.armijo thank you for using our product. If you want to move the navbar-toggle to the left side you need to add the class "pull-left" to the element with class "navbar-toggle". For the other request, having the menu on all the sizes, unfortunately, this is not implemented. You need to manually write the code and adjust the behavior of the sidebar in order to obtain that effect. You can find more about how the sidebar is working by going to assets/sass/md/_sidebar-and-main-panel.scss and _responsive.scss. All the changes that you are doing there, must be compiled with Koala from the assets/sass/material-dashboard.scss. You have an example of how to work with SASS files in the documentation at the end "Changing colors". Hope this helps. Best, Alex!
2 years ago

midhilajm18
  • downloaded
2 years ago

after run npm start it showing error npm start > [email protected] start /opt/lampp/htdocs/todo/material-dashboard-angular-master > tsc && concurrently "tsc -w" "lite-server" [0] fs.js:1387 [0] throw error; [0] ^ [0] [0] Error: watch /opt/lampp/htdocs/todo/material-dashboard-angular-master ENOSPC [0] at exports._errnoException (util.js:1028:11) [0] at FSWatcher.start (fs.js:1385:19) [0] at Object.fs.watch (fs.js:1411:11) [0] at Object.watchDirectory (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/typescript/lib/tsc.js:1727:32) [0] at Object.executeCommandLine (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/typescript/lib/tsc.js:39774:43) [0] at Object.<anonymous> (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/typescript/lib/tsc.js:40095:4) [0] at Module._compile (module.js:571:32) [0] at Object.Module._extensions..js (module.js:580:10) [0] at Module.load (module.js:488:32) [0] at tryModuleLoad (module.js:447:12) [0] tsc -w exited with code 1 [1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults... [1] ** browser-sync config ** [1] { injectChanges: false, [1] files: [ './**/*.{html,htm,css,js}' ], [1] watchOptions: { ignored: 'node_modules' }, [1] server: { baseDir: './', middleware: [ [Function], [Function] ] } } [1] events.js:161 [1] throw er; // Unhandled 'error' event [1] ^ [1] [1] Error: watch . ENOSPC [1] at exports._errnoException (util.js:1028:11) [1] at FSWatcher.start (fs.js:1385:19) [1] at Object.fs.watch (fs.js:1411:11) [1] at createFsWatchInstance (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:37:15) [1] at setFsWatchListener (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:80:15) [1] at FSWatcher.NodeFsHandler._watchWithNodeFs (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:228:14) [1] at FSWatcher.NodeFsHandler._handleDir (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:407:19) [1] at FSWatcher.<anonymous> (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:455:19) [1] at FSWatcher.<anonymous> (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:460:16) [1] at FSReqWrap.oncomplete (fs.js:114:15) [1] lite-server exited with code 1 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: `tsc && concurrently "tsc -w" "lite-server" ` 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 ERR! A complete log of this run can be found in: npm ERR! /home/midhilaj/.npm/_logs/2017-07-28T12_10_17_688Z-debug.log

midhilajm18
  • downloaded
2 years ago

unable to start it showing error <br> aterial-dashboard-angular-master$ npm start > [email protected] start /opt/lampp/htdocs/todo/material-dashboard-angular-master > tsc && concurrently "tsc -w" "lite-server" [0] fs.js:1387 [0] throw error; [0] ^ [0] [0] Error: watch /opt/lampp/htdocs/todo/material-dashboard-angular-master ENOSPC [0] at exports._errnoException (util.js:1028:11) [0] at FSWatcher.start (fs.js:1385:19) [0] at Object.fs.watch (fs.js:1411:11) [0] at Object.watchDirectory (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/typescript/lib/tsc.js:1727:32) [0] at Object.executeCommandLine (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/typescript/lib/tsc.js:39774:43) [0] at Object.<anonymous> (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/typescript/lib/tsc.js:40095:4) [0] at Module._compile (module.js:571:32) [0] at Object.Module._extensions..js (module.js:580:10) [0] at Module.load (module.js:488:32) [0] at tryModuleLoad (module.js:447:12) [0] tsc -w exited with code 1 [1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults... [1] ** browser-sync config ** [1] { injectChanges: false, [1] files: [ './**/*.{html,htm,css,js}' ], [1] watchOptions: { ignored: 'node_modules' }, [1] server: { baseDir: './', middleware: [ [Function], [Function] ] } } [1] events.js:161 [1] throw er; // Unhandled 'error' event [1] ^ [1] [1] Error: watch . ENOSPC [1] at exports._errnoException (util.js:1028:11) [1] at FSWatcher.start (fs.js:1385:19) [1] at Object.fs.watch (fs.js:1411:11) [1] at createFsWatchInstance (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:37:15) [1] at setFsWatchListener (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:80:15) [1] at FSWatcher.NodeFsHandler._watchWithNodeFs (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:228:14) [1] at FSWatcher.NodeFsHandler._handleDir (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:407:19) [1] at FSWatcher.<anonymous> (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:455:19) [1] at FSWatcher.<anonymous> (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/chokidar/lib/nodefs-handler.js:460:16) [1] at FSReqWrap.oncomplete (fs.js:114:15) [1] lite-server exited with code 1 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: `tsc && concurrently "tsc -w" "lite-server" ` 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 ERR! A complete log of this run can be found in: npm ERR! /home/midhilaj/.npm/_logs/2017-07-29T04_06_56_507Z-debug.log [email protected]:/opt/lampp/htdocs/todo/material-dashboard-angular-master$ ng serve The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli' Error: The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli' at Object.<anonymous> (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/@ngtools/webpack/src/index.js:14:11) at Module._compile (module.js:571:32) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at Object.<anonymous> (/opt/lampp/htdocs/todo/material-dashboard-angular-master/node_modules/@angular/cli/tasks/eject.js:10:19) at Module._compile (module.js:571:32) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19)

marcin.marzΔ™ta
  • downloaded
2 years ago

@axelut Hi Alex The theme is so amazing! Are you sure it's completely free? ;)

alexpaduraru
  • downloaded

@marcin.marzΔ™ta thank you for the kind words. Yes, it is 100% free. If you want to spend some πŸ’°πŸ’°πŸ’° please check the PRO version here: https://www.creative-tim.com/product/material-dashboard-pro-angular2. Best, Alex!
2 years ago

hassanmian24
  • downloaded
2 years ago

@axelut please help me how to move this template to angular-cli ??

alexpaduraru
  • downloaded

@hassanmian24 thank you for your interest in our product. We will release the official angular-cli version in a couple of days. Migrating the current version to angular-cli is really hard and it doesn't make sense to start that as we are working for the launch of it. Hope you understand the situation. Best, Alex!
2 years ago

rohit.rohitesh
  • downloaded
2 years ago

hi, is there any way to separate .js file and .ts file

alexpaduraru
  • downloaded

@rohit.rohitesh thank you for your interest in our product. We will release in a couple of days a version that is built with CLI and Angular 4, the scripts will be only in .ts files. We will send emails when this is released. Hope this information helps you. Best, Alex!
2 years ago

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