Material Components for the Internet vs Angular Material 2

Question

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

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

Both projects create user interface components based on material design. In addition, they have a similar set of components, ready / in active development , and the same set of components as in the near future (listed here and here ).

Can someone please help me understand the coincidence between the two projects, and which one should I choose for new projects?

At a fundamental level, I understand that Angular Material2 will integrate more seamlessly and closely with Angular projects, while Material Components for the Web will provide hooks for use by several JS frameworks. But I see no reason for the overlay, and which one will have more momentum (more components).

Answer 1

Full disclosure: I am working on Material Components for the Internet , so my opinion may be a little biased :)

TL DR uses any library that helps you create your user interface in the most efficient way or use them in parallel. Check out our angular2 integration example angular-mdc-web to see how to wrap an MDC-Web component using ng2.

As mentioned, the goal of Material Components for the Internet ( MDC-Web for short) is to create a canonical implementation of Material Design components for the entire web platform. Angular / material2 is a great library - many of us on the Material Design team, including myself, have contributed to it - but it is exceptional for non-corner applications2. In addition, non-Google libraries and frameworks such as React, Aurelia, Vue and others do not have an official solution that meets their needs.

Angular2 falls within our scope of “the entire web platform,” and we definitely want to support it because of this. At this point in both projects, we may have some components that you need, but angular / material2 not, or vice versa. I recommend that you use any library that helps you achieve your goals in the best possible way. It can be angular / material2, it can be MDC-Web or, to be honest, it can be both. For example, you can use our select component along with side2 components, and everything should work fine. As mentioned in TL; DR, angular-mdc-web is a fully featured library that wraps MDC-Web in the idiomatic angular2 + API.

In conclusion, we note that MDC-Web is the only library developed by the Material Design team itself. Thanks to this, we can collaborate and iterate with the same people who are authors of the Material Design specification.

Answer 2

Update (March 16, 2018):

From the comments provided by @elDuderino Material2, there seems to be a way to customize. An answer was provided before the material was cdk ..

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

Both fundamentals are now very developed. I use both of them in different projects. It took me just a week to transfer the project from one framework to another. Therefore, I would advise you to try both that, and that which is convenient for you.

---

I will share my experience. His self-confident and biased. I like to be corrected.

We start from scratch and use Angular. We decided to go with the material. I started looking for the best framework and tried all of them: Materialize, MDL, Angular Material 2, and finally, MDC for the Internet.

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

Material2

• Pros
  • Readymade Everything is available and ready to go.
  • Architecture close to angular

• Cons

  • The list of components is not yet complete (they will turn out over time, so everything is in order)
  • Setting not possible

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

  Here are the questions I asked (one of them is marked as closed, as it seems to be asking for opinions -.-)

  How to set up corner material 2

  How to expand the style of corner components

  Of course, they did not receive any answers, and I could not configure them. If I'm wrong, please guide me.

Check out the update above

• The documentation is bad

  Let's look at an example. See the number of examples.

  MDC for web map examples

  Material2 map examples

MDC for web

• Cons

  • Not available for Angular

  We cannot start using it right away if you want to do it angularly. You need to write a wrapper for Angular for each component. Some effort may be required. But each team can afford some time for customization, and there is a third-party effort to make it easier. If this is normal, do not do it in an angular manner, I think we can start without shells.

  • The list of components is not yet complete (they will turn out over time, so everything is in order)

• Pros

  • Universal, not tied to frames. It is always safe to invest.
  • More input, as other framework developers also use it. Over time, he receives more input and future (almost)
  • Fully customizable.
  • It seems that only the framework Material, the design team is directly related to
  • Can use knowledge / styles for mobile devices too.
  • The documentation is awesome. It seems like a lot of effort and time is being invested.

Answer 3

For those considering Angular Material 2, the Sketch Material plugin / theme editor and Gallery tool are only available for MDC. I am on the same path and I started with Angular Material 2, and with a recent introduction to Angular Ivy, I’m not sure how much effort the team is going to put into Angular Material 2. I’m moving to MDC, which is a safe bet.

From a recent Readme:

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

• Most of the Angular Material team is leased to a framework team that helps with Ivy. We used the Angular CDK and Angular Material tests to check the code paths, as well as to troubleshoot problems when switching Google applications to the new rendering pipeline.
• We are also working with the Material Design team on a deeper collaboration strategy. We will have more than to share when our plans develop.
• Various fixes and minor feature enhancements.
• Design to improve the API for a tree component to improve ergonomics.

Answer 4

It looks like the Angular Material team plans to partner with the MDC team:

High-level events planned for the 4th quarter of 2018 (October - December):

• Improving our own build and automation tools
• Fix bugs and reduce technical debt at Google
• Work on long-term collaboration plans with the MDC web team
• Projects for advanced table enhancements (column resizing, selection directives, inline-edit)

( README )

This was added to readme about 20 days ago (October 10, 2018).
Thus, it is likely that in the future Angular Material will become just a kind of Angular shell or Angular implementation of MDC for the Web.

Answer 5

Corner material 2 is still out of date and does not meet material specifications. Do not use this.