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).
Angular material and material design basically the same. Material design is abstract for mobile and web. Angular material is implemented for Angular. So if you use "Angular material" you are using "Material design".
Angular Material Framework can be used to design High-quality websites and web apps that are mobile-friendly. Bootstrap Framework can be used for developing cross-platform apps that work well on desktops. Angular Material Framework does not support the Responsive Oriented Approach (ROA).
Yes, you can use parts of Angular Material and Bootstrap together in the same web or mobile project. Developers need to be careful not to use the same components, which can clash.
Angular Material comprises a range of components which implement common interaction patterns according to the Material Design specification. Form Controls Controls that collect and validate user input. Navigation Menus, sidenavs and toolbars that organise your content.
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.
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.
Cons
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
Documentation is bad
Lets see an example. See the number of examples provided.
MDC for web card examples
Material2 examples for Card
Cons
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.
Pros
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With