Material Dashboard PRO Angular2 is a This dashboard is the premium version for the Material Dashboard Angular, which is available for free download. Material Dashboard PRO Angular 2 was built based on the feedback that we received from the users of the free version. We tried to keep it as user-friendly as possible, but to provide all the useful tools for developing a complex product. This dashboard can help you build admin panels, CRMs or content management systems.
Material Dashboard PRO Angular 2 has the same line of design as the Material Kit PRO, so they will help you have the presentation pages of your site and the Admin/CMS having the same design trend. If you think you will need more landing and example pages, be sure to check it out. If you love the material design, you'll probably enjoy using these products! We recommend you to use them separate and not to try to combine their CSS and JS files.
Material Dashboard PRO Angular 2 uses a framework built by our friend Federico - Bootstrap Material Design (http://fezvrasta.github.io/bootstrap-material-design/), who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to his team for the effort and forward thinking they put into it.
During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:
- Robert McIntosh for the notification system
- Chartist for the wonderful charts
- Tristan Edwards for the Sweet Alert
- Eonasdan for the DateTimPicker
- Kirill Lebedev for jVector Maps
- Vincent Gabriel for the Bootstrap Wizard
- FullCalendar.io for the awesome Calendar
Let us know your thoughts below. And good luck with development!
Quick start options:
- Install NodeJs from NodeJs Official Page.
- Open Terminal
- Go to your file project
- Run in terminal:
npm install - And:
npm start
Within the download you'll find the following directories and files:
md-pro-angular2
├── LICENSE.pdf
├── README.md
├── app
│ ├── app.component.html
│ ├── app.component.js
│ ├── app.component.js.map
│ ├── app.component.ts
│ ├── app.module.js
│ ├── app.module.js.map
│ ├── app.module.ts
│ ├── dashboard
│ │ ├── calendar
│ │ │ ├── calendar.component.html
│ │ │ ├── calendar.component.js
│ │ │ ├── calendar.component.js.map
│ │ │ └── calendar.component.ts
│ │ ├── charts
│ │ │ ├── charts.component.html
│ │ │ ├── charts.component.js
│ │ │ ├── charts.component.js.map
│ │ │ └── charts.component.ts
│ │ ├── components
│ │ │ ├── buttons
│ │ │ │ ├── buttons.component.html
│ │ │ │ ├── buttons.component.js
│ │ │ │ ├── buttons.component.js.map
│ │ │ │ └── buttons.component.ts
│ │ │ ├── grid
│ │ │ │ ├── grid.component.html
│ │ │ │ ├── grid.component.js
│ │ │ │ ├── grid.component.js.map
│ │ │ │ └── grid.component.ts
│ │ │ ├── icons
│ │ │ │ ├── icons.component.html
│ │ │ │ ├── icons.component.js
│ │ │ │ ├── icons.component.js.map
│ │ │ │ └── icons.component.ts
│ │ │ ├── notifications
│ │ │ │ ├── notifications.component.html
│ │ │ │ ├── notifications.component.js
│ │ │ │ ├── notifications.component.js.map
│ │ │ │ └── notifications.component.ts
│ │ │ ├── panels
│ │ │ │ ├── panels.component.html
│ │ │ │ ├── panels.component.js
│ │ │ │ ├── panels.component.js.map
│ │ │ │ └── panels.component.ts
│ │ │ ├── sweetalert
│ │ │ │ ├── sweetalert.component.html
│ │ │ │ ├── sweetalert.component.js
│ │ │ │ ├── sweetalert.component.js.map
│ │ │ │ └── sweetalert.component.ts
│ │ │ └── typography
│ │ │ ├── typography.component.html
│ │ │ ├── typography.component.js
│ │ │ ├── typography.component.js.map
│ │ │ └── typography.component.ts
│ │ ├── dashboard.component.html
│ │ ├── dashboard.component.js
│ │ ├── dashboard.component.js.map
│ │ ├── dashboard.component.ts
│ │ ├── dashboard.module.js
│ │ ├── dashboard.module.js.map
│ │ ├── dashboard.module.ts
│ │ ├── dashboard.routes.js
│ │ ├── dashboard.routes.js.map
│ │ ├── dashboard.routes.ts
│ │ ├── forms
│ │ │ ├── extendedforms
│ │ │ │ ├── extendedforms.component.html
│ │ │ │ ├── extendedforms.component.js
│ │ │ │ ├── extendedforms.component.js.map
│ │ │ │ └── extendedforms.component.ts
│ │ │ ├── regularforms
│ │ │ │ ├── regularforms.component.html
│ │ │ │ ├── regularforms.component.js
│ │ │ │ ├── regularforms.component.js.map
│ │ │ │ └── regularforms.component.ts
│ │ │ ├── validationforms
│ │ │ │ ├── validationforms.component.html
│ │ │ │ ├── validationforms.component.js
│ │ │ │ ├── validationforms.component.js.map
│ │ │ │ └── validationforms.component.ts
│ │ │ └── wizard
│ │ │ ├── wizard.component.html
│ │ │ ├── wizard.component.js
│ │ │ ├── wizard.component.js.map
│ │ │ └── wizard.component.ts
│ │ ├── home
│ │ │ ├── home.component.html
│ │ │ ├── home.component.js
│ │ │ ├── home.component.js.map
│ │ │ └── home.component.ts
│ │ ├── maps
│ │ │ ├── fullscreenmap
│ │ │ │ ├── fullscreenmap.component.html
│ │ │ │ ├── fullscreenmap.component.js
│ │ │ │ ├── fullscreenmap.component.js.map
│ │ │ │ └── fullscreenmap.component.ts
│ │ │ ├── googlemaps
│ │ │ │ ├── googlemaps.component.html
│ │ │ │ ├── googlemaps.component.js
│ │ │ │ ├── googlemaps.component.js.map
│ │ │ │ └── googlemaps.component.ts
│ │ │ └── vectormaps
│ │ │ ├── vectormaps.component.html
│ │ │ ├── vectormaps.component.js
│ │ │ ├── vectormaps.component.js.map
│ │ │ └── vectormaps.component.ts
│ │ ├── pages
│ │ │ ├── timeline
│ │ │ │ ├── timeline.component.html
│ │ │ │ ├── timeline.component.js
│ │ │ │ ├── timeline.component.js.map
│ │ │ │ └── timeline.component.ts
│ │ │ └── user
│ │ │ ├── user.component.html
│ │ │ ├── user.component.js
│ │ │ ├── user.component.js.map
│ │ │ └── user.component.ts
│ │ ├── tables
│ │ │ ├── datatable.net
│ │ │ │ ├── datatable.component.html
│ │ │ │ ├── datatable.component.js
│ │ │ │ ├── datatable.component.js.map
│ │ │ │ └── datatable.component.ts
│ │ │ ├── extendedtable
│ │ │ │ ├── extendedtable.component.html
│ │ │ │ ├── extendedtable.component.js
│ │ │ │ ├── extendedtable.component.js.map
│ │ │ │ └── extendedtable.component.ts
│ │ │ └── regulartable
│ │ │ ├── regulartable.component.html
│ │ │ ├── regulartable.component.js
│ │ │ ├── regulartable.component.js.map
│ │ │ └── regulartable.component.ts
│ │ └── widgets
│ │ ├── widgets.component.html
│ │ ├── widgets.component.js
│ │ ├── widgets.component.js.map
│ │ └── widgets.component.ts
│ ├── main.js
│ ├── main.js.map
│ ├── main.ts
│ ├── shared
│ │ ├── footer
│ │ │ ├── footer.component.html
│ │ │ ├── footer.component.js
│ │ │ ├── footer.component.js.map
│ │ │ ├── footer.component.ts
│ │ │ ├── footer.module.js
│ │ │ ├── footer.module.js.map
│ │ │ └── footer.module.ts
│ │ └── navbar
│ │ ├── navbar.component.html
│ │ ├── navbar.component.js
│ │ ├── navbar.component.js.map
│ │ ├── navbar.component.ts
│ │ ├── navbar.module.js
│ │ ├── navbar.module.js.map
│ │ └── navbar.module.ts
│ └── sidebar
│ ├── sidebar-routes.config.js
│ ├── sidebar-routes.config.js.map
│ ├── sidebar-routes.config.ts
│ ├── sidebar.component.html
│ ├── sidebar.component.js
│ ├── sidebar.component.js.map
│ ├── sidebar.component.ts
│ ├── sidebar.metadata.js
│ ├── sidebar.metadata.js.map
│ ├── sidebar.metadata.ts
│ ├── sidebar.module.js
│ ├── sidebar.module.js.map
│ └── sidebar.module.ts
├── assets
│ ├── css
│ │ ├── bootstrap.min.css
│ │ ├── demo.css
│ │ ├── material-dashboard.css
│ │ └── material-dashboard.css.map
│ ├── img
│ ├── js
│ │ ├── core
│ │ ├── demo.js
│ │ ├── init
│ │ ├── material-dashboard-angular.js
│ │ ├── plugins
│ │ └── sidebar-moving-tab.js
│ └── sass
│ ├── material-dashboard
│ └── material-dashboard.scss
├── changelog.txt
├── documentation
│ ├── css
│ │ └── demo-documentation.css
│ └── tutorial-components.html
├── index.html
├── lock.html
├── login.html
├── package.json
├── pricing.html
├── register.html
├── systemjs.config.js
└── tsconfig.json
V1.0.0 - 24 Mar 2017 [initial Release]
V1.0.1 - 01 May 2017 - Bug Fixes
- fixed red background for sidebar without image
- fixed Widges -> Widgets typo
- fixed Extended Tables titles alignment
- fixed issue with Burger menu on mobile/tablet in Login/Register/Lock/Pricing pages
- fix double scroll problems on Windows
- added Google Maps API Key for Demo presentation
What's next? MD Pro Angular CLI V1.1.0 - End of May 2017 Release
- rebuild whole product for Angular CLI with Angular Components from Typescript
- replace jQuery libraries with Angular similar versions
- move Off Canvas Menu generation from jQuery to Angular
- added 2 layouts: for Dashboard and for login/register/lock/pricing pages
More products from Creative Tim: http://www.creative-tim.com/bootstrap-themes
Tutorials: https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w
Freebies: http://www.creative-tim.com/products
Affiliate Program (earn money): http://www.creative-tim.com/affiliates/new
Social Media:
Twitter: https://twitter.com/CreativeTim
Facebook: https://www.facebook.com/CreativeTim
Dribbble: https://dribbble.com/creativetim
Google+: https://plus.google.com/+CreativetimPage
Instagram: https://instagram.com/creativetimofficial
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent