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?

Solution 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.

Solution 2

Go for Materialize.

I don't know why people downvoted your question. It is a legitimate question. And though Angular Material looks like a more attractive choice as it has the famous word "Angular" in its name. But it is definitely not the right choice. It may have better integration with angular but a good programmer can integrate Materialize equally good.

Angular Material does not have that many components yet. In fact for some of the components, it does not even have proper examples.

I started a project in Angular Material but then shifted to Materialize a because as of 20th September 2017 it is much more comprehensive a library. And is also documented properly with so many examples.

Solution 3

Angular Material is an Angular module which contains Angular directives. It was made specifically for Angular while MaterializeCSS is a only CSS library with a little Javascript.

You should use Angular Material because of all the components that will work in your app unlike the MaterializeCSS where some things will not work, it's designed for pure Javascript or jQuery.

Comments

[Bernardo Dal Corno]

Side note: there is AngularJS Material, for angularJs

[Jonathan]

how about cloud firestore, angular, materialize, and polymer... just not there yet

[Reza Saadati]

@Ruben Material Design is a Google product but Materializecss is not a Google product. It has been developed by 4 students. So Google has nothing to do with it.

[Sunil Garg]

As of now, jquery is not mandatory at all. It is not just a CSS library with some JS. We have developed a full project with materialize-css.