Material Components for the Web vs Angular Material 2

material-design angular-material2 material-components
DeepakV picture DeepakV · Dec 16, 2016 · Viewed 19.3k times · Source

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

Answer

Travis Kaufman picture Travis Kaufman · Dec 19, 2016

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.

Related questions

Angular material design - how to add custom button color?

I want to add my own custom colors, similar to "primary", "warn" etc. For example, I added a class for an orange background, but I use it as a class and not as a color attribute. It works, but the …

Read More
Material design component "is not a known element" in Angular2

I have a hybrid Angular1 and Angular2 application. In one of the Angular2 components that I route to, I want to use a Material Design Button. When I insert a button into the template like this <md-button>foo&…

Read More
How can I use custom theme palettes in Angular?

I want to use my company's brand colors throughout the app. I have found this issue: AngularJS 2 - Material design - set color palette where I can build an allegedly custom theme, but it's basically just using different parts of …

Read More