2

I'm currently building a dashboard application, and I'd like to use angular-material instead of bootstrap.

I'm not asking for code or pre-made solutions here, I just need well-argumented points of view.

I was thinking about using https://github.com/angular-dashboard-framework/angular-dashboard-framework or https://github.com/DataTorrent/malhar-angular-dashboard as a framework for my dashboard, but they are both based on bootstrap as far as I know.

I was thinking about modify them so that I could use angular-material instead of bootstrap, but in the case I fail doing that my question is :

Is it better to build the dashboard from scratch with angular-material, or would it be possible to use angular-material and few bit of bootstrap for the widgets of the dashboard only (which means all menus and tabs would be based angular-material) ?

I'm not affraid of starting from scratch, but I don't want to waste time. As I need something both efficient and good-looking, I thought I'd ask here first and here some pieces of advice before starting. I'm not really confident about mixing bootstrap and angular-material from what I read on the Internet untill now, but maybe for this case it might be ok.

derOtterDieb
  • 545
  • 4
  • 12
  • 35

2 Answers2

1

Well, I would like to share my experience on this. The most tricky thing that you gonna face would be on css side. To get your own design by mixing these two, you will have to override the css classes between bootstarp and angular-module.

Apart from this, if you'll be using only bootstrap on UI then there is a very little possibility of facing any js issue while using bootstarp because it would have it's own js files using jquery files and that might interfere with $digest cycle of angular.

From my experience, you can easily manage bootstrap with angularJS so you can go ahead with https://github.com/angular-dashboard-framework/angular-dashboard-framework or https://github.com/DataTorrent/malhar-angular-dashboard.

Let me know if this answer is sufficient or you have more concerns.

Community
  • 1
  • 1
Shashank Vivek
  • 16,888
  • 8
  • 62
  • 104
1

I did exactly this and managed to get it working with AM and a directive added for pie and bar charts and another for gauges. Mine was a pretty simple single page dash but with some controls (standard AM) for dates and other criteria.

Getting it to all fit well and be mostly responsive took alot of hand tooling with the CSS though. It might be easier now that my flexbox skills have improved.

angular-chart angular-gage

James Bell
  • 889
  • 2
  • 10
  • 16