Why Material Design for Angular’s Button Are Better

In any Angular application I am working with, there have been two front end frameworks that I have heavily relied on. I wouldn’t consider any library to use in my project unless it also has an Angular implementation. Material Design for Angular and UI Bootstrap, both possess Angular implementations.

In my early involvement with Angular, I leaned more heavily to Bootstrap UI as I was accustomed to the Bootstrap syntax. As my experience with Angular has increased so has my view that  Material Design for Angular provides a better user experience over Bootstrap UI.

My goals in every project are to provide a rich user experience, fast loading intuitive controls and flowing layouts. For me, both frameworks attempt to address the goals which are shared amongst front end developers like myself.

Both frameworks attempt to provide elements consistent with what users expect on the modern web. In my opinion, while Bootstrap elements get the job done and have been great for quick internal applications, Material Design for Angular delivers the wow!

Not only that, but Material Design for Angular elements can take on different attributes seamlessly. This means that we can utilize the same classes and elements on our page without issues. If I want my button to navigate to a login screen now, then to trigger a modal later, I wouldn’t have a problem. An example of this is Material Design for Angular’s ability to handle the ng-href or href attribute on a button.

Consider the following example of our HTML button element and a Material Design for Angular md-button:

<!doctype html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
    
  <md-button class="md-warn md-raised" href='http://www.google.com'>MD Button</md-button>
  <button class='btn btn-warning' href='http://www.google.com'>Bootstrap Button
  
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>  
  <!-- Your application bootstrap  -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript">    
    var app = angular.module('BlankApp', ['ngMaterial']);
  </script>
</body>
</html>

If we displayed this in the browser it would look like

Bootstrap UI v Material Design for Angular

We can see from the console that the Bootstrap button and the Material Design for Angular button both have the href attribute. If you were to click on the Material Design for Angular button it would then take you to Google’s home page and the Material Design for Angular library would render the button as an anchor, while the Bootstrap button would do nothing.

To me that is a pretty good reason to take advantage of Material Design for Angular. You could use the styling without the Shadow Dom elements or use the Shadow Dom  elements and use Bootstraps UI styling instead of Material Design for Angular but you would be sacrificing the wow factor. Also, the shift to web components is coming and that is exactly what Material Design for Angular focuses on, creating reusable web components that enrich the user experience on the web. This is completely off the radar for Bootstrap UI.

A Web Developer by trade, find me on Github A motorcycle enthusiast at heart. Most days I'd rather be in the woods anywhere.