75

Recently, the successor to MDL (Material Design Lite) project was launched as Material Components for the Web. One of its goals is "Seamless integration with other JS frameworks and libraries".

There is another project Angular Material2 which provides material design components specifically for Angular (v2+).

Both projects are creating material design based UI components. Also, they have similar set of components ready/in-active-development, and same set of components as coming-soon (listed here and here).

Can someone please help me understand the overlap between 2 projects and which one should I pick for new projects?

At a fundamental level, I do understand Angular Material2 will more seamlessly and tightly integrate with Angular projects, while Material Components for the Web will provide hooks for multiple JS frameworks to use. But I fail to see reason for overlap and which one will have more momentum (read more components).

naXa
  • 26,677
  • 15
  • 154
  • 213
DeepakV
  • 2,280
  • 1
  • 15
  • 20
  • Please note that [Angular Material](https://github.com/angular/material) for Angular 1.x is a distinct entity from Angular Material2 for Angular 2+. Also Material Components for the Web are distinct from Polymer's Material/[Paper Elements](https://elements.polymer-project.org/browse?package=paper-elements) which are standards-based Web Components. None of the tech being discussed in this question qualifies as a standards-based "web component". – Splaktar Jan 07 '17 at 07:03
  • 1
    agreed.. thanks for the edit – DeepakV Jan 07 '17 at 15:34
  • 1
    Don't use angular material 2. It's shit. I'm came across your post because i was looking for an alternative to angular material 2. Checkout Vue.js' vuetify material. Angular material should look like that. – CENT1PEDE Jun 06 '17 at 01:48
  • 1
    Have to agree with Cent1pede. The documentation for Angular Material Design 2 is absolute crap – Steven Hoff Mar 23 '18 at 05:02

5 Answers5

54

Full disclosure: I work on Material Components for the web, so my opinion may be a bit biased :)

TL;DR use whichever library helps you build your UI in the most efficient way possible, or use them side-by-side. Check out our angular2 integration example angular-mdc-web to see how to wrap a MDC-Web component using ng2.

The goal of Material Components for the web (abbrev. MDC-Web), as has been alluded to, is to create a canonical implementation of Material Design components for the entire web platform. Angular/material2 is an excellent library - many of us on the Material Design team, myself included, have contributed to it - but it is exclusionary to non-angular2 applications. Additionally, non-google libraries and frameworks such as React, Aurelia, Vue, and others have no official solution to suit their needs.

That being said, Angular2 falls under our scope of the "entire web platform", and we definitely want to support it because of that. At this stage in both projects, we may have some components you need that angular/material2 does not, or vice versa. I'd encourage you to use whichever library helps you accomplish your goals in the best way possible. That could be angular/material2, it could be MDC-Web, or quite honestly it could be both. For example, you could use our select component along side material2's components, and things should work just fine. As mentioned in the TL;DR,angular-mdc-web is a fully-featured library that wraps MDC-Web in an idiomatic angular2+ API.

On a final note, MDC-Web is the only library that is developed by the Material Design team itself. Because of this, we are able collaborate on and iterate with the same people who author the Material Design spec.

Travis Kaufman
  • 2,710
  • 18
  • 21
  • 36
    So, there is not yet a clear path in Google themselves. We still have to wait until a manager decides which one has to get killed. – neclepsio Dec 20 '16 at 09:06
  • 11
    The way I see it right now is that it would be far better for them (and for us, the developers) to focus more of their resources towards MDC-Web and change material2 project into a simple ng2 wrapper/adapter project for MDC-Web. – Rodrigo Quesada Feb 08 '17 at 07:46
  • 1
    Please make more complex example for MDC-web implementation with angular2 – Vlad Apr 30 '17 at 15:08
  • 1
    Also a good example https://github.com/trimox/angular-mdc-web – Vlad Apr 30 '17 at 15:10
  • 2
    Really? Vue? Look at this https://vuetifyjs.com/ it's the perfect material framework. – CENT1PEDE Jun 06 '17 at 01:50
  • There's also https://github.com/google/material-design-lite, how about this one? – CENT1PEDE Jun 06 '17 at 01:50
  • ^ MDC for Web is next version of Material design lite. – Vamshi Jun 19 '17 at 07:16
  • Mixing frameworks compromises future maintenance, so it's a dubious advice. I see presence of both frameworks as a mitigation step after [MDL](https://github.com/google/material-design-lite) failure. It seems quite natural to me that when [MDC-Web](https://github.com/material-components/material-components-web) becomes a mature product, it will be picked up by a much bigger community and it will be no room for a second one (which is quite narrow). Maybe after that we'll get an official Angular wrapper from Google. – Alex Klaus Aug 07 '17 at 07:28
  • 1
    Great points, but a very important distinction to make is that MDC-Web is _not_ a framework, nor will it ever try to be. It is a UI library for Material Design on the web platform. You're right in that one of the primary goals is to interoperate well with other frameworks, which is something we got a lot of feedback on regarding MDL. We'd also love to see convergence and adoption as well, but that is a long-term effort that requires a lot of coordination and planning. I'm also personally very interested to see what our community winds up building, especially w/ non-goog libs like React. – Travis Kaufman Aug 14 '17 at 01:02
  • I was expecting that Angular would build their material components on top of Material Design Lite css but that was not the case. Now instead of using components to separate mainly behavior, state in parts of the page. They are using the components to also impose style structure instead of relying on css. They are direspecting one of the most successfull ideas of web to separate logic (javascript), content (html), presentation. STYLE SHOULD BE ENFORCED BY CSS NOT BY REUSE OF COMPONENTS. Ditch Angular 2 and built your components on top of a descent css implementation of the Material Spec. – alcoforado Mar 31 '18 at 18:03
  • It seems a bit odd to me that Angular Material is not very responsive (just look at the website on a small device), given that Google down-ranks websites for not being responsive. – Barnaby Apr 27 '18 at 07:14
18

Update( 16 March 2018 ):

From the comments provided by @elDuderino Material2 seems to have a way to customize . The answer provided was before Material had cdk ..

https://material.angular.io/guide/customizing-component-styles

Both frameworks are very matured now. I use both of them in different projects. It took me only a week to migrate a project from one framework to other. So I would suggest try both and see which you find comfortable.

I will share my experience. Its opinionated and biased. Love to be corrected.

We are starting from scratch and using Angular. We decided to go with Material. I started my hunt for a better framework and tried all of them: Materialize, MDL, Angular Material 2 and finally MDC for web.

Here are my observations, especially for Material2 vs MDC for Web.

Material2

  • Pros
    • Readymade. Everything is available and ready to start working on
    • Architecture close to Angular

  • Cons

    • Components list is not complete yet ( they will get over the time, so its ok )
    • Customizing is impossible

    I know we can add themes, that's all. All the HTML and CSS for the components is added in Angular Components. So it's compiled as JavaScript and applies at runtime. So, there is no way to override the behavior. I tried for a week and could not do it.

    Here are questions I asked ( one of them marked to close as it appeared to be asking for opinions -.- )

    How to customize Angular Material 2

    How to Extend Angular Component style

    Of course they did not get any answers and I could not customize them. If I am wrong, please direct me.

Check update provided above

MDC for Web

  • Cons

    • Not readily available for Angular

    We can't start using it straight away if you want to do it Angular way. Need to write a wrapper for Angular for each component. Might take some effort. But every team can afford some time to customize and there are third party efforts to make it easier. If it's ok not to do it in angular way, I believe we can start off without the wrappers.

    • Components list is not complete yet ( they will get over the time, so it's ok )

  • Pros

    • Generic, not tied to framework. Always safe to invest in.
    • More contribution, since other frameworks developers also use it. Over the time it gets more contributions and future proof (almost )
    • Totally customizable.
    • Appears like only framework Material design team is directly involved with
    • Can use the knowledge/styles for mobile devices too.
    • Documentation is awesome. Looks like a lot of effort and time is put in.
Nathan
  • 301
  • 2
  • 14
Vamshi
  • 8,328
  • 4
  • 32
  • 51
  • 1
    Regarding customising Material2, they rely on you setting variables and using mixins. See [Theming your custom components](https://github.com/angular/material2/blob/master/guides/theming-your-components.md) and use of variables in the source code (e.g. the [toolbar](https://github.com/angular/material2/blob/master/src/lib/toolbar/toolbar.scss)) – Alex Klaus Aug 03 '17 at 06:30
  • @AlexKlaus If I am not wrong, the link you provided is only to change colors (Theme) not to change other CSS of the components. They came up with `@angular/cdk` for customizing components I guess . I need to look into it and update my answer. – Vamshi Aug 03 '17 at 06:38
  • 2
    I wanted to point out that both of them are written in a rigid way, so apart from changing the theme (read "colours"), there is not much you can safely do. You called MDC for Web "totally customizable", but you can't do even simple things like changing the toolbar height (see [here their answer](https://github.com/material-components/material-components-web/issues/348) on a such feature request). – Alex Klaus Aug 03 '17 at 08:04
  • The main Selling point they have is to strict adherence to material design, so few things are difficult to override. But when I said "totally customizable" I meant we can change them in our custom component which is created from it . In case of Material , it was not even added in scss they were hardcoded in javascript and totally not possible to override , I felt its very difficult to extend the angular components . You can see the questions I asked.. – Vamshi Aug 03 '17 at 08:43
  • Maybe the implementation has changed since you provided your answer, but saying that Angular Material is impossible to customize is absolutely wrong. They even have a page dedicated to this in the documentation: https://material.angular.io/guide/customizing-component-styles – elDuderino Mar 15 '18 at 19:45
  • @Skeptor Actually, the Angular CDK stands for "component dev kit", which provides a common utility of patterns for other components to use. – Edric Jun 22 '18 at 14:53
4

For folks considering Angular Material 2, the Sketch Material Plugin/Theme Editor and the Gallery tool is only available for MDC. I am on the same path, and I started with Angular Material 2, and with the recent introduction on Angular Ivy, I am not sure how much effort the team is going to put in the Angular Material 2. I am moving to MDC, which is a safe bet.

From the recent Readme :

High level stuff planned for Q1 → Q2 2019 (January - June):

  • Most of the Angular Material team is on loan to the framework team helping with Ivy. We've been using the Angular CDK and Angular Material tests to validate code paths as well as helping debug issues in switching Google applications to the new rendering pipeline.
  • We're also working with the Material Design team on a strategy to collaborate more deeply. We'll have more to share on this once our plans are further along.
  • Assorted bugfixes and minor feature improvements.
  • Design for API enhancements to the tree component to improve ergonomics.
Rajesh Jain
  • 831
  • 14
  • 31
2

It seems like the Angular Material team plans to collaborate with the MDC team:

High level stuff planned for Q4 2018 (October - Dec):

  • Improve our own build and automation tooling
  • Fix bugs and reduce some technical debt inside Google
  • Working on long-term plans on how to collaborate with the MDC Web team
  • Designs for advanced table improvements (column resize, selection directives, inline-edit)

(README)

This has been added to the readme about 20 days ago (Oct 10, 2018).
So chances are, that in future Angular Material is just some kind of Angular wrapper or Angular implementation of the MDC for Web.

Springrbua
  • 8,377
  • 9
  • 48
  • 92
-1

Angular Material 2 is still out of date and does not implement the material spec correctly. Don't use it.

Tiedye
  • 457
  • 3
  • 7