Angular Material VS Materializecss

Question

Well, it's about a week i'm trying to running up an application with Angular Material.
After so much challenging with Angular Material and its nerve wracking bugs (that might be never solved because of their milestone to releasing V2 for angular V2 as soon as possible), now it's blowing my mind, that why i have to use 616KB JS+CSS Angular Material module instead of 254KB JS+CSS Materializecss.
As i know (tell me if i'm wrong!):

It's best to try and avoid changing DOM elements whenever possible

But Angular materials base is directives that cause a lot of reflows/repaints, and actually based on demos i saw, Materializecss was much faster and lighter than Angular Material.
That's obvious Angular Material is more Angular-friendly and has some specific features like $mdThemingProvider and ..., but i have my doubts about using Angular Material or maybe its performance.
Any words to make me believe again in Angular Material?
Is it worth to use Angular Material instead of pure Angular + Materializecss ?
Because i can't see any major change in result of them?

Answer 1

Right now it feels that MaterializeCSS is more mature and developed, with more features, animations, and components.

However Angular Material has a large ToDo list so it could catch up, but it looks like it wont happen until 2018 or later based on their github readme status. Nothing planned after end of 2017 currently.

Materialize Pros and Cons

• PRO: The good thing about materialize is that What You Type is What You Get, meaning the html and css you put in your angular templates is exactly how it will be in the browser, which means its very easy to style with css.

• CON: The bad thing about materialize is that is requires jquery, which means special setup is required when using angular. If you're using webpack, its really easy using provide plugin

Example:

  new webpack.ProvidePlugin({
     $     : 'jquery',
     jQuery: 'jquery'
  })

That automatically makes jquery available in every module that uses it, so it really isn't a bad thing after all.

• PRO: Another good thing is that its easy to port your html/css from one project to another, since its just html and css, no custom directives. So if you wanted to switch from angular to react, or to plain html, that would be easy with Materialize while maintaining all your markup and styles.

• PRO: Well developed, lots of components, lots of styles, many features that really give a professional polish to your app

• PRO: Very good documentation and excellent examples.

• PRO: Developers are very responsive to GitHub issues and PRs

MaterializeCSS Score: +4

Angular Material Pros and Cons

• PRO: The good thing is that its built for angular, so it has custom directives angular style. However, this also required setup since you have to import the module, but that's no different from any angular module.

• PRO: Developers are also very responsive to GitHub issues and PRs

• CON: The bad thing about angular material is that it translates all those custom directives into their own html and css, which I found can be quite tricky to override and customize, but not impossible.

• CON: Another bad thing is that the code it not portable. It only works for angular2+, so you can't switch frameworks with this. All your markup and styles are stuck in angular.

• CON: A lot more progress is needed before it's mature and can provide a full Material experience.

• CON: Poor documentation. The examples are limited, there is minimal explanation around examples, no options are given as to what each example can do, confusing at best.

Angular Material Score: -2

Based on this short analysis, in my opinion, Materialize is the way to go as of September 2017, even while using an Angular2+ app. I've been using Materialize in my angular 4 app and it works great. I hope this helps.