Material Dashboard Pro Angular

Let's get to know each other! Take our developer survey, opened to coders everywhere! ๐Ÿ™๐Ÿป

Material Dashboard Pro Angular

Premium Bootstrap 4 Angular 7 Template
· 4.90/5 (208 Reviews)

License

2,674 Downloads
560 Comments
Premium Support
6 months Updates
Release: 2 years ago
Update: 6 months ago

200 Handcrafted Components

15 Customized Plugins

6 Example Pages

Bootstrap Based

Documentation

Fully Responsive

Product certified by: Creative Tim

Get Free Demo

Learn more about Material Dashboard Pro Angular in the light demo version. It has features from the full version. We hope you will like this introduction to this product!

What is in Demo?
  • Components · 60
  • Plugins · 2
  • Examples Pages · 3
  • -
  • -
  • -
  • -
What is in PRO Version?
  • Components · 200
  • Plugins · 15
  • Example Pages · 6
  • + Documentation
  • + SASS Files
  • + Photoshop Files
  • + Sketch Files
Get Free Demo

We are here to help you!

560 Web Developers commented on this product

Github Docs FAQ Page

danska
  • downloaded
11 months ago

@chelaru_ciprian What would be the beat way to disable scroll in mobile view while the sidebar is open? I want to disable scroll while it is open because the sidebar doesn't always properly move with the scroll and then we have problems with the position of the taps. I would also like it if the sidebar collapsible items collapse when the sidebar is closed. Right now they remain opened which looks a bit weird. I would prefer sidebar items to fold back when it closes.

chelaru_ciprian
  • owner

Hi, @danska ! Thank you for using our product. If you want to disable the scroll you need to set in scss overflow: hidden; on .nav-open .wrapper. If you want to close the collapsible items when you close the sidebar you need to change the function for closeSidebar() from navbar.component.ts to remove the class show(if it was added) and to change the aria-expanded to false, but I think this is not a good user experience. Best, Ciprian
11 months ago

danska
  • downloaded
11 months ago

Please and me to github. utkarshns

chelaru_ciprian
  • owner

I've sent you an invitation. Best, Ciprian
11 months ago

danska
  • downloaded
11 months ago

@chelaru_ciprian Quote:"if you want to disable the scroll you need to set in scss overflow: hidden; on .nav-open .wrapper." This doesnt seem to be working, would be great if you can tell which files to edit. On chrome for Android, this creates a lot of problem. Thanks

chelaru_ciprian
  • owner

I've tested it and all is working fine. What problems do you encounter?
11 months ago

shirinhoramshahi 10 months ago

hi my co-worker has bought BS4 version of your product but your doc is not update and we dont know how to rtl it! also we checked BS3 version and its rtl is very ridiculous!! in your doc you'v mentioned that the product has rtl support so how can I rtl it?

chelaru_ciprian
  • owner

@shirinhoramshahi Thank you for using our product and for pointing this to us! You need to add the class 'rtl' on body tag and add "../node_modules/bootstrap-rtl/dist/css/bootstrap-rtl.css" in styles in angular-cli.json after "../node_modules/bootstrap/dist/css/bootstrap.css". Best, Ciprian
10 months ago

shirinhoramshahi

I exactly did the same instruction in BS3 the scrollbar crashes and the menu disapears after first click also in BS4 version nothing happens!! my panel should be rtl and without rtl support your product is useless for me just wasting money!
10 months ago

chelaru_ciprian
  • owner

@shirinhoramshahi here is a video with the dashboard after the changes: https://vimeo.com/277044463 and here is a video with the changes for rtl: https://vimeo.com/277044741. Best, Ciprian
10 months ago

beatlejuan52bs
  • downloaded
10 months ago

Hi @chelaru_ciprian ,Do you have any reference link on how this template works with the routes? Regards

chelaru_ciprian
  • owner

We used Lazy Loading Module for that: https://angular.io/guide/lazy-loading-ngmodules.
10 months ago

daniele.renda
  • downloaded
10 months ago

The layout of the page https://demos.creative-tim.com/material-dashboard-pro-angular2/pages/pricing is broken.

daniele.renda
  • downloaded

Firefox 60.0 on Windows
10 months ago

chelaru_ciprian
  • owner

On what browser?
10 months ago

lduarte
  • downloaded
10 months ago

@ @chelaru_ciprian Good day download the latest Material Dashboard Pro Angular, but I have problems with mat-select are frozen at the time you can select one. Thank you

chelaru_ciprian
  • owner

@lduarte Can you open an issue on GitHub with the steps to reproduce this behavior? Best, Ciprian
10 months ago

beastonabun
  • downloaded
10 months ago

What is the right way to upgrade the material dashboard pro from 1.5 to 2.1 in my Angular project? We are also upgrading the project from Angular 5 to 6.

chelaru_ciprian
  • owner

@beastonabun , it is not so simple because we changed the version of bootstrap from 3 to 4 and there are a lot of changes to the project. I can give you access to our private repository on GitHub to see what files where changed. Best, Ciprian
10 months ago

beastonabun
  • downloaded

For starter, we copied the assets/scss folder to our project and also the boostrap-material-design folder to node_module. Is that a correct step? We could not find any documentation regarding the process.
10 months ago

chelaru_ciprian
  • owner

@beastonabun yes, this is a correct step, but you need to change the bootstrap version from package.json from 3 to 4.1. After that, you need to change the classes from HTML that have been renamed in Bootstrap v4.1.
10 months ago

alex.immanuel
  • downloaded
10 months ago

Getting error when i run " npm install " npm ERR! Unexpected token k in JSON at position 26734 while parsing near '...reporter":"^1.1.1","ka'

chelaru_ciprian
  • owner

Hi, @alex.immanuel . Have you modified angular.json file? Best, Ciprian
10 months ago

alsutan
  • downloaded
10 months ago

Hi Team i am trying to run this angular application without <meta name="viewport" content="width=device-width" /> but when i removed nothing happening please help to remove this i wanna this page not supporting mobile .

alsutan
  • downloaded

[email protected] @chelaru_ciprian please your help
10 months ago

alsutan
  • downloaded

[email protected] @chelaru_ciprian thank you for Replay .I removed this two line from index.html but it's staying same thing please your help. Regards Suhaib
10 months ago

chelaru_ciprian
  • owner

Hi, @alsutan ! Thank you for using our product. You need to remove <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> and <meta name="viewport" content="width=device-width" />. Best, Ciprian
10 months ago

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