Post

Angular Material versus Material Design Lite

Draft updated on Invalid Date
Default avatar

By Jad Joubran

Angular Material versus Material Design Lite

This tutorial is out of date and no longer maintained.

Introduction

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 prevent 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 and platforms (YouTube, Android, Play, Inbox, Gmail, etc.).

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

Material Design emphasizes responsive interactions, mainly through ripple effects.

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

Material Design also emphasizes 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:

  1. bower install material-design-lite --save

npm:

  1. 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:

  1. bower install angular-material --save

npm:

  1. 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 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. This 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 of 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 is 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.

In 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!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Jad Joubran

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel