A couple months ago, I was having a debate on whether I should switch from Bootstrap to Angular Material. I have used Bootstrap for a very long time and was totally comfortable using it on all my projects. If you are not aware, Angular material is a set of components implementing Google Material Design language on angular applications. You can learn more here.
What attracted me to Angular Material was the User Experience of its component. How intuitive to user action they were as compared to Bootstrap own components. Yes, you could probably have the same effect by applying a Bootstrap theme, but is it really the same? That’s a discussion for another day. So, I finally made the decision to get out of my comfort zone and implement Angular Material on my first angular app and here is what I learned:
Transition Step by Step
If you decide to make the switch, don’t remove bootstrap at the beginning but at the end, when you have made the switch successfully. This is because Angular Material doesn’t provide a responsive layout by default like bootstrap. It can be very frustrating when your nicely build app falls apart because you decided to remove bootstrap at the beginning.
Instead, rely on bootstrap for responsive design first or switch to another responsive design library before removing bootstrap. I rememberred that before I fully committed to making the switch, I had to discard all the changes I made to the project several times. To avoid getting frustrated and most likely giving up, focus first on changing the Bootstrap components and then later you can decide on which responsive layout to use.
Responsive Design isn’t Easy with Angular Material
Like I said in the point above, Angular Material doesn’t provide a responsive layout by default. While this can be frustrating to some, it is done this way so that it can be easy to optimize when building your app.
If you want an Angular based solution for responsive layout, you will have to rely on Angular Flex Layout. It has a steep learning curve as compared to bootstrap but if you get used to it, it’s amazing and very robust.
Do not import all Modules, Just Include what you need
If you were to google, you will easily find a list of all Angular Material Components. Most people instinct is to import all modules, so that they can stop worrying about unimported modules while adding new components. While this will work, you will end up with so many unused modules (unless you are using all of them) in your app which will affect its performance.
It is easier to just import only the modules you need. This is because Angular CLI will always throw an error in case you forgot to import a module you are using. All you will have to do is simply add to your list of imported modules. Angular Material has been optimized for Angular and will only include modules you are using to the final build of your app, leaving out unused features and modules.
You will miss some things in Bootstrap
Bootstrap is an amazing and one of the most complete front-end framework out there. It has a lot of thing that are still missing from Angular Material. While some can still be added later, some might not even be added. One thing I miss most about bootstrap are the very many helper classes it has: padding, margin, text alignment, font-weight, border, background colors and so many others. May be someone, or even me should port all the helper classes from bootstrap for Angular Material.
I know these are small things, but they are still very important. Also, when it comes to component, there are some found in Bootstrap not found in Angular Material and vice versa. This can be disappointing especially if you rely on them. You can check my component by component comparison of both Angular Material and Bootstrap here.
It’s still not officially released
Why is this important? It may not be stable for use in production apps. While as of the time of writing, it is in Release Candidate 1 (released yesterday), which is much more stable as compared to when it was in beta. Still there can be changes that can break your app easily, so be careful when using it. Before updating, you take a look at the changelog first so that you don’t break your app. Here is a list some of the planned features for Angular Material:
