Angular Material - Angular Material Bottom Sheet - Angular Material Tutorial

What is Bottom Sheet in Angular Material?

  • A bottom sheet is a sheet of material that slides up from the bottom edge of the screen.
  • Bottom sheets are displayed only as a result of a user-initiated action, and can be swiped up to reveal additional content.
  • learn angular material tutorials - design-bottom-sheet

    learn angular material tutorials - design-bottom-sheet Example

  • A bottom sheet can be a temporary modal surface or a persistent structural element of an app.
  • mdBottomSheet, an Angular Service, is used to open a bottom sheet over the application and provides a simple promise API.
Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular


S.N Method & Description


Show a bottom sheet with the specified options.

S.N Parameter & Description

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

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

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

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

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

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

  • disableParentScroll - {boolean=} − Whether to disable scrolling while the bottom sheet is open. Default true.

Sr.No Returns & Description


A promise that can be resolved with $mdBottomSheet.hide() or rejected with $mdBottomSheet.cancel().


  • This shows the use of $mdBottomSheetservice to showcase use of bottom sheet.
<html lang="en" >
      <link rel="stylesheet" href="">
      <script src=""></script>
      <script src=""></script>
      <script src=""></script>
      <script src=""></script>
      <script src=""></script>
	  <script language="javascript">
           .module('firstApplication', ['ngMaterial'])
           .controller('bottomSheetController', bottomSheetController);

        function bottomSheetController ($scope, $mdBottomSheet) {
           $scope.openBottomSheet = function() {
                 template: '<md-bottom-sheet>Learn <b>Angular Material</b> @!</md-bottom-sheet>'
   <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!

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team


This tutorial provides most of the basics of all the below related informations such as angular material design , material design angular , angular material table , angularjs material , material angular , angular material icons , angular 2 material design , angular material template , angular materialize , angular material theme , angular material layout , material design angular 2 , angular material demo , angular material dialog , angular material form , angular material button , material angular 2 , angular material datepicker , angular material data table , angular material tutorial , angular material login form , material for angular 2 , angular material data grid , material ui angular , angular material calendar , angular material design table , angular material grid , google angular material , angular material components , angular 2 material ui , angular material autocomplete example , material ui angular 2 , angular material 2 demo , angular2 material demo , angular material template free , angular material design tutorial , angularjs material tutorial , material design for angular 2 , angular material tabs example , angular material ui , table angular material , angular material angular 2 , angular material layout align , what is angular material , angular material tabs , angular2 material example , angular 2 material tutorial , angular material login page , angular 2 material demo , angular material cdn , angular material design example , angularjs material design template , material angularjs , angular material grid list , angular material search bar , angular material vs bootstrap , angular material js , angular material range slider , angular material sidenav example , angular material form example , material angular icons , angular material datepicker example , angular material design icons , angular material design template , angular material bootstrap , materialize angular , angular material template free download , bootstrap material design angular , angular material table example

Related Searches to Bottom Sheet