To Angular Material or not to Angular Material?
Angular Material is a UI component infrastructure that is used by more than 65.000 websites all over the world. Besides, this infrastructure provides responsive components that are pretty easy to reuse, a nice and clean design, and is made by the same team as Angular, making integrating it with Angular Material easy.
However, if you are new to Angular, just like me, not only you would have to learn Angular but also learn Angular Material and, to be honest, I found it more difficult to understand Angular Material than to understand Angular.
So if you are thinking of using this implementation of Material Design, I’m going to sum up my experience here:
Why to use Angular Material:
- If you already understand the whole Angular Material ecosystem, the components are easy to use.
- You can install it easily.
- Angular Material provides a lot of useful components that are otherwise very tricky to get to work correctly, such as date pickers or tables. For example, you can add pagination to your table or sort each column with minimal effort.
- Material Design is immediately identifiable and used all over the world, so the users’ expectation of how elements should work are met.
- It’s very simple to maintain a consistent design.
- It comes with a fully functional default theme, but you can choose between 4 themes and can change the theme with just one line of code.
- It has a dark theme, which is pretty powerful not only for design reasons, but also for accessibility purposes.
- You can build components quickly as everything is already made, and it comes with many possibilities and configurations
- It’s based on CSS flexbox and solves some CSS layouts problems. Besides, it’s responsive.
- Angular Material has a friendly community and you can find many solutions to almost every problem surfing the net.
Why not to use Angular Material
- While It’s pretty responsive it’s not responsive enough. There are some components that don’t look quite right on mobile, and other components create horizontal scrolls on small devices, such as tables.
- It doesn’t use semantic HTML.
- Although Material Design is beautiful, if you want custom styles, good luck! If you try to overwrite Angular Material’s CSS you will struggle with specificity and, in most cases, you will lose. You will end up writing your CSS in a general stylesheet.
- Each component has many options and configurations and you might end up losing your mind trying to find the perfect solution. Besides, some options are a little bit tricky to implement.
- Angular Material’s biggest problem is that it doesn’t provide a component that imports all the components it offers, so you have to import each component you are going to use. It might sound silly, but if you are new to both Angular and Angular Material, you can go crazy trying to find which import you are missing.
- Although It has a well-detailed documentation, it could be improved.
- If you want to internationalize your web, it’s a little bit complicated to translate some parts of angular material’s components
- Angular Material’s accessibility needs urgently to be improved should: It overuses arias, it misses keyboard events at some components, it’s difficult to improve the accessibility of the components and the accessibility of some components if half implemented.
Conclussion
If you are thinking of starting a small project and you want it to have very customized styles, I recommend against using Angular Material. Angular Material can be difficult to understand at the beginning and it’s a headache to create custom designs with a project made with it.
Nevertheless, I strongly believe that Angular Material has a lot to offer to bigger. If you are working on a big application or platform that needs quick implementation and all you’re looking for is a clean design, Angular Material is really powerful and it can save you time designing and implementing functionalities.
