Post

Angular Material versus Material Design Lite

Draft updated on Invalid Date

Angular

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:

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

Material Design Lite website: getmdl.io
Angular Material website: material.angularjs.org
Polymer Project polymer-project
Paper Elements paper-elements
Material Design specs
Material Design color palette
A tiny angular wrapper on top of MDL: angular-material-design-lite
Using Laravel & Angular? Laravel5 angular material starter
Ionic Material Design Lite ionic-material-design-lite
Quick starter for Angular Material material-start

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 our products

About the authors