Post
Ask Question

Introduction To Angular Material 1.0

What is Angular Material?

From the Angular Material official site, Angular Material is, " For developers using AngularJS, Angular Material is both a UI Component framework and a reference implementation of Google's Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design".

Basically, Angular Material is a set of UI components which are used for material design. They provide a great set of directives for our daily uses. Components in Angular Material are very attractive and easy to use. It helps in creating faster, beautiful, and more responsive websites. It is inspired from Google Material Design.

We require these dependencies for Angular Material -

  • Angular.js
  • Angular-animate.js
  • Angular-aria.js
  • Angular-material.js
  • And one Css file
  • Angular-material.css
So, let's create our first Angular Material application.

Ex,
  1. <html ng-app="MyApp">  
  2.   
  3. <head>  
  4.     <title>First App Angular Material</title>  
  5.     <link rel="stylesheet" href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" />  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>  
  8.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>  
  9.     <script src="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>  
  10. </head>  
  11.   
  12. <body>  
  13.     <div ng-controller="AppCtrl">  
  14.         <md-button class="md-raised md-primary" ng-click="buttonClick()">  
  15.             {{ButtonText}}  
  16.         </md-button>  
  17.     </div>  
  18. </body>  
  19.   
  20. </html>  
  21. <script>  
  22.     angular.module('MyApp', ['ngMaterial'])  
  23.         .controller('AppCtrl', function($scope, $mdSidenav) {  
  24.             $scope.ButtonText = "Test Button";  
  25.   
  26.             $scope.buttonClick = function() {  
  27.                 alert("First Angular Material App");  
  28.             };  
  29.         });  
  30. </script>  
  31.  
Find Example on Codepen,

image

Md-Toolbar UI Component Angular Material

<md-toolbar> 

Basically, the toolbar contains page title. It describes purpose of the screen. It may have multiple links to move forward. Following is a simple example for toolbar in Angular Material.
  1. <md-toolbar>  
  2.     <div class="md-toolbar-tools">  
  3.         <h2 md-header-title flex>Page Title</h2>  
  4.     </div>  
  5. </md-toolbar>  
The following are useful classes with <md-toolbar>,

md-tall
  • It is used for larger toolbar. You can also use md-medium-tall for medium toolbar.
md-toolbar-tools-bottom
  • It is used for better scroll experience. It vertically align titles and button to the bottom of the toolbar. As the user scrolls up, blank space on the toolbar is collapsed, and title and actio are still visible.
md-toolbar-tools
  • Group all tool bar items under an element with CSS class "md-toolbar-tools".
md-warn
  • It shows toolbar in warning color.
md-accent
  • It shows toolbar in accent color.
Following is  an example for fixing toolbar in Angular Material.
  1. <html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css">  
  6.     <style>  
  7.         [scroll] {  
  8.             position: fixed;  
  9.             top: 0;  
  10.         }  
  11.           
  12.         section {  
  13.             height: 1600px;  
  14.         }  
  15.           
  16.         i {  
  17.             font-size: 24px;  
  18.         }  
  19.     </style>  
  20. </head>  
  21.   
  22. <body ng-app="myApp">  
  23.     <md-toolbar scroll class="md-warn">  
  24.         <div class="md-toolbar-tools">  
  25.             <h2 md-header-title flex>Title</h2>  
  26.         </div>  
  27.     </md-toolbar>  
  28.     <section id="page-section">  
  29.         <md-content>  
  30.             <!-- Here Your Content -->  
  31.         </md-content>  
  32.     </section>  
  33.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>  
  34.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>  
  35.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>  
  36.     <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>  
  37. </body>  
  38.   
  39. </html>  
Following is link for codepen,

codepen
Sidenav (Md-Sidenav) With Angular Material

<md-sidenav> 

Sidenav is used for navigation, it often seen with mobile application. Basically sidenav is used for site-map prospective. It contains list of links for various functions. We can expand and collapse the sidenav as per our requirement.

Following is a simple example for toolbar in Angular Material,
  1. <md-sidenav class="md-sidenav-left" md-is-locked-open=true>  
  2.     <md-toolbar layout-padding class="md-medium-tall">  
  3.         <h2> Sidenav</h2>  
  4.     </md-toolbar>  
In this example, we use class md-sidenav-left, it's for opening sidenav to left. If you want to display to right side then use " md-sidenav-right "}

Here, we use md-is-locked-open, It is used for when you want to display sidenav. Basically it is used for small devices like mobile but you also display for all device then use just need to pass true. You can also set it for specific screen size md-sidenav-is-open="$mdMedia('gt-sm')". It will show sidebar for device greater than small ( > 960 px)

$mdSidenav Service 

Angular Material gives a service for sidenav. It is possible to have multiple sidenav with application at time when you use this service.

You can open or close sidenav from code.
  • $mdService('sidenavId').open() 
  • $mdService('sidenavId').close() 
Find following code on codepen.
 
Find following link to blog for Angular and Angular material for more details...


Similar Articles