Angular Material - Bottom Sheet

The $mdBottomSheet, an Angular Service, is used to open a bottom sheet over the application and provides a simple promise API.
$mdBottomSheet.show(options);
Show a bottom sheet with the specified options.
* options
An options object, with the following properties −
templateUrl - {string=} − The url of an html template file that will be used as the content of the bottom sheet. Restrictions: the template must have an outer md-bottom-sheet element.
templateUrl - {string=} − The url of an html template file that will be used as the content of the bottom sheet. Restrictions: the template must have an outer md-bottom-sheet element.
template - {string=} − Same as templateUrl, except this is an actual template string.
template - {string=} − Same as templateUrl, except this is an actual template string.
scope - {object=} − The scope to link the template / controller to. If none is specified, it will create a new child scope. This scope will be destroyed when the bottom sheet is removed unless preserveScope is set to true.
scope - {object=} − The scope to link the template / controller to. If none is specified, it will create a new child scope. This scope will be destroyed when the bottom sheet is removed unless preserveScope is set to true.
preserveScope - {boolean=} − It dictates whether to preserve the scope when the element is removed. By default, it is false.
preserveScope - {boolean=} − It dictates whether to preserve the scope when the element is removed. By default, it is false.
controller - {string=} − The controller to associate with this bottom sheet.
controller - {string=} − The controller to associate with this bottom sheet.
locals - {string=} − An object containing key/value pairs. The keys will be used as names of values to inject into the controller. For example, locals: {three: 3} will inject three into the controller with the value of 3.
locals - {string=} − An object containing key/value pairs. The keys will be used as names of values to inject into the controller. For example, locals: {three: 3} will inject three into the controller with the value of 3.
clickOutsideToClose - {boolean=} − It dictates whether the user can click outside the bottom sheet to close it. By default, it is true.
clickOutsideToClose - {boolean=} − It dictates whether the user can click outside the bottom sheet to close it. By default, it is true.
escapeToClose - {boolean=} − It dictates whether the user can press escape to close the bottom sheet. By default, it is true.
escapeToClose - {boolean=} − It dictates whether the user can press escape to close the bottom sheet. By default, it is true.
resolve - {object=} − Similar to locals, except that it takes promises as values and the bottom sheet will not open until the promises resolve.
resolve - {object=} − Similar to locals, except that it takes promises as values and the bottom sheet will not open until the promises resolve.
controllerAs - {string=} − An alias to assign the controller to on the scope.
controllerAs - {string=} − An alias to assign the controller to on the scope.
parent - {element=} − The element to append the bottom sheet to. The parent may be a function, string, object, or null. Defaults to appending to the body of the root element (or the root element) of the application. e.g. angular.element(document.getElementById('content')) or "#content".
parent - {element=} − The element to append the bottom sheet to. The parent may be a function, string, object, or null. Defaults to appending to the body of the root element (or the root element) of the application. e.g. angular.element(document.getElementById('content')) or "#content".
disableParentScroll - {boolean=} − Whether to disable scrolling while the bottom sheet is open. Default true.
disableParentScroll - {boolean=} − Whether to disable scrolling while the bottom sheet is open. Default true.
promise
A promise that can be resolved with $mdBottomSheet.hide() or rejected with $mdBottomSheet.cancel().
The following example shows the use of the $mdBottomSheet service and also the use of bottom sheet.
am_bottomsheet.htm
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
	  
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('bottomSheetController', bottomSheetController);

         function bottomSheetController ($scope, $mdBottomSheet) {
            $scope.openBottomSheet = function() {
               $mdBottomSheet.show ({
                  template: '<md-bottom-sheet>Learn <b>Angular Material</b> @ TutorialsPoint.com!</md-bottom-sheet>'
               });
            };
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication">
      <div ng-controller = "bottomSheetController as ctrl" layout = "column">
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <md-button class = "md-raised md-primary" ng-click = "openBottomSheet()">
                  Open Bottom Sheet!
               </md-button>
            </form>
         </md-content>
      </div>
   </body>
</html>
Verify the result.

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    28 Lectures 
     2.5 hours 

 Anadi Sharma

    11 Lectures 
     7.5 hours 

 SHIVPRASAD KOIRALA

    16 Lectures 
     2.5 hours 

 Frahaan Hussain

    69 Lectures 
     5 hours 

 Senol Atac

    53 Lectures 
     3.5 hours 

 Senol Atac
 Print
 Add Notes
 Bookmark this page