Angular Material vs. Material Design Lite

Material Design

In this article we’re going to explore the options that Google provides us when implementing Material Design in our websites & apps. While both Angular Material and Material Design Lite follow the Material Design specs, each library implements it in a different way.

It’s important to mention that both libraries have decent online documentation. They also have fast releases cycles and good support on github and related forums.

It’s also important to mention that both libraries, namespace their classes with the md- or mdl- prefix. Which is a good practice that helps preventing classes conflicts. Unlike the classes provided with bootstrap (btn for example).

Material Design

Material Design is a design language developed by Google. It aimed to make a consistent experience across all Google apps & platforms (YouTube, Android, Play, Inbox, Gmail, etc.).

Google announced Material Design at the 2014 Google I/O conference.

Material Design emphasizes on responsive interactions, mainly through ripple effects.

Examine how the Material Response makes the element responsive to our touch input:

Source: https://www.google.com/design/spec/animation/responsive-interaction.html

Material Design also emphasizes on shadow effects to convey depth.

Watch the video again and notice how the element is being lifted on touch.

After the success that Material Design received with the Launch of Android 5, which was the first Material Design implementation, Google decided to release SDKs that allowed developers to integrate Material Design in their apps. Hence, Angular Material and Material Design Lite.

It’s not a competition between Angular Material and Material Design Lite. Google released those 2 SDKs so they can give us more choice depending on our use case.

Getting started with Material Design Lite

Since Material Design Lite does not have any dependency, it’s going to be easy to set up.

You can use your favorite tool to grab its source code.

bower:


bower install material-design-lite --save

npm:


npm install material-design-lite --save

Or you can just browse to getmdl.io and grab the source code.

Next, we need to create an index.html file and include MDL’s CSS file and JS files:


<html>
    <body>
        <script src="https://storage.googleapis.com/code.getmdl.io/1.0.3/material.min.js"></script>
    </body>
</html>

Now we can immediately use any of the MDL components.

Let’s say we want to add a raised button with ripples, we just need to add the following to the body:


<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
  Button
</button>

See the Pen Material Design Lite by Jad Joubran (@jadjoubran) on CodePen.

Although MDL has a Javascript library included, in most scenarios you won’t need to use Javascript at all. You only need to use the javascript library to register components when dynamically injecting templates.


componentHandler.upgradeAllRegistered();

Material Design Lite offers a variety of components such as buttons, cards, tabs, menus, sliders, text fields and more..

Here are some other elements using Material Design Lite:

Input

See the Pen Material Design Lite by Jad Joubran (@jadjoubran) on CodePen.

Checkboxes

See the Pen Material Design Lite by Jad Joubran (@jadjoubran) on CodePen.

Tabs

See the Pen Material Design Lite by Jad Joubran (@jadjoubran) on CodePen.

Theming

Next, we need to be able to apply our brand’s colors to Material Design Lite. We can customize Material Design Lite from the Customize page. They have a cool widget that lets you choose complementary colors according to the Material Design color palette specs. And then download the corresponding CSS and include it in our project, or you can simply link to the CDN.

Getting started with Angular Material

Angular Material depends on angular, angular-animate and angular-aria. If you’re using bower or npm to manage your dependencies, then they will be automatically installed alongside angular-material.

Let’s start by grabbing the source code for Angular Material.

bower:


bower install angular-material --save

npm:


npm install angular-material --save

Or if you’re not using any command line tool to download your dependencies, then continue reading and use the CDN links provided below.

Let’s setup the index.html page:


<html ng-app="app">
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>

         
        <script src="main.js"></script>
    </body>
</html>

Notice that we added ng-app="app" to our HTML tag because we need to bootstrap our angular app inside main.js


(function(){
    "use strict";

    var app = angular.module('app', ['ngMaterial']);

})();

We added ngMaterial as a dependency to our app module. And now we we can get started and add another raised button with ripples, but this time using Angular Material:


<md-button class="md-raised">Hello There!</md-button>

See the Pen Material Design Lite by Jad Joubran (@jadjoubran) on CodePen.

Notice that adding a button is much easier using Angular Material because we have access to all the available directives. Directives make it easier to use Material Design functionality without having to worry about the underlying HTML structure and classes.

Here are some other elements in Angular Material:

Input

See the Pen Material Design Lite by Jad Joubran (@jadjoubran) on CodePen.

Dialog

See the Pen Material Design Lite by Jad Joubran (@jadjoubran) on CodePen.

Tabs

See the Pen Material Design Lite by Jad Joubran (@jadjoubran) on CodePen.

Theming

Angular Material handles theming way differently than Material Design Lite.

It exposes $mdThemingProvider in the config part of the bootstrapping process. Which allows us to set 3 main color palettes: Primary, Accent and Warn.


(function(){
    "use strict";

    angular.module('app').config( function($mdThemingProvider) {
        $mdThemingProvider.theme('default')
        .primaryPalette('indigo')
        .accentPalette('grey')
        .warnPalette('red');
    });

})();

For more details on theming, check out Angular Material theming docs.

Summary

I gathered the most important information to come up with the below comparison. I don’t personally consider the minified JS and minified CSS as an important factor. But I’m sure that it might interest some readers.

Angular Material depends on Angular and two angular modules: angular-animate (ngAnimate) and angular-aria (ngAria). Whereas Material Design Lite has no dependencies.

ngAria provides accessibility support for assistive technologies, such as screen readers. It automatically sets aria attributes using the corresponding angular directives. For example, it sets the aria-hidden attribute according to the value of the ngShow attribute. Material Design Lite does not have any internal accessibility support, but you can take care of it manually.

Being able to use directives to abstract the UI layer is a major plus in my opinion. I prefer writing the following


<md-button>Get Started</md-button>

instead of


<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
  Get Started
</button>

Angular Material supports more than 30 components, whereas Material Design Lite supports about 15. That’s because the goal from Material Design Lite is to remain as a lite library, rather than a full fledged UI framework.

Here’s a table that summarizes the main differences between the 2 alternatives:

Angular Material Material Design Lite
Dependencies Angular, ngAnimate, ngAria
Directives Yes No
minified JS ~175KB (excluding dependencies) ~59KB
minified CSS ~175KB ~120KB
Accessibility Built-in (ngAria)
Icons Font File Yes Yes
Components ~30 components ~15 components

Decision Matrix

The most important question that you should ask yourself is the following: Are you already using AngularJS? Or are you willing to use it?

If the answer to any of those two questions is Yes, then Angular Material is probably the way to go.

Here’s an elaborate matrix that explains all the different scenarios.

Using AngularJs? Complex UI? Preference
Yes Yes Angular Material
Yes No Depends on your experience
No Yes Material Design Lite
No No Material Design Lite

Another important factor would be comparing the components available by Angular material to the components available by Material Design Lite. Because sometimes there’s a specific component that matters a lot and of course, you don’t want to reinvent the wheel.

Grid & Layout

Angular Material Material Design Lite
Desktop percentage
(0-100)
12 columns
Tablet percentage
(0-100)
8 columns
Phone percentage
(0-100)
4 columns
Uses FlexBox Yes Yes
Vertical Layout Yes No
Vertical Centering Yes
(out of the box)
No
(needs manual implementation )
Flex order Yes No
Advanced Yes No

Angular Material’s Grid is much more powerful than Material Design Lite’s grid. Because Material Design Lite is meant for less complex UIs. Angular Material offers a wide range of features when it comes to layouts. You can specify if a layout is horizontal (default) or vertical. This is all done using flexbox. You can also specify child layout alignment, for example center center or space-between center. Check out the official documentation.

These are extremely helpful when building complex dashboards and/or advanced page layouts.

Browser Support

Browser support is something that I want to expand on.

Both Angular Material and Material Design Lite use the latest and greatest of CSS (flexbox, calc, etc.) which means they both need evergreen browsers to work perfectly. Evergreen browsers are browsers that auto-update whenever a new version is available.

Chrome, Firefox, Safari, Opera and Edge (Available on Windows 10) are all evergreen browsers.

After running quick tests using Internet Explorer 10 and Internet Explorer 11, I noticed that all components are expected to work on IE10 with a downgraded experience. But because both grids rely on Flexbox, they might not work on IE10.

For that reason, I’d recommend you setup an unsupported browser page to notify all Internet Explorer 10 users. You can add the following to the of your page:



    <script type="text/javascript">document.location.href ='https://browser-update.org/update.html'%lt;/script>
    

Polymer & Paper Elements

Polymer is a library that allows us to use Web Components, even though some APIs for Web Components are missing in some browsers. So it includes a lightweight shim for Web Components.

If you’re wondering what Web Components are, you can think of them as Angular Directives, that work without the need for Angular. In other terms, it allows us to bundle markup, styles and Javascript into custom elements. Say for example:


<google-map latitude="37.790" longitude="-122.390"></google-map>

Paper Elements are an implementation of Material Design using Polymer.

So Paper Elements are indeed a third alternative that I wanted to hold off until the end of the article.

You can consider Paper Elements to be the most advanced compared to Angular Material and Material Design Lite. But if you feel like learning Web Components, then I’d recommend giving it a try.

Resources

Below are a list of useful resources when working with Angular Material or Material Design Lite.

Conclusion

It turned out that Angular plays an important role when choosing between Angular Material and Material Design Lite. But we also saw that other factors can affect our decision. For bigger projects with more complex UI, Angular Material is much more powerful. Especially with the separation of concerns that you get from Angular.

As a conclusion, we can see that Angular Material is more suitable for bigger projects with complex User Interfaces, whereas Material Design Lite is more suitable when you just want to get started quickly with minimal complexity.

Feel free to post any questions or feedback in the comments, I’d be happy to answer!

Jad Joubran

At the age of 19, Jad Joubran founded eTobb, a startup that connects patients and doctors in the MENA region. At 22, his experience revolves around managing a team of 4 developers at eTobb, Technical Consulting companies in the Middle East and South Africa, publishing web development articles, presenting at international conferences and providing mentoring sessions for developers on Codementor.