Shows and hides a backdrop over the UI. Appears behind popups, loading, and other overlays.

Often, multiple UI components require a backdrop, but only one backdrop is ever needed in the DOM at a time.

Therefore, each component that requires the backdrop to be shown calls $ionicBackdrop.retain() when it wants the backdrop, then $ionicBackdrop.release() when it is done with the backdrop.

For each time retain is called, the backdrop will be shown until release is called.

For example, if retain is called three times, the backdrop will be shown until release is called three times.


  • The backdrop service will broadcast ‘backdrop.shown’ and ‘backdrop.hidden’ events from the root scope, this is useful for alerting native components not in html.


function MyController($scope, $ionicBackdrop, $timeout, $rootScope) {
  //Show a backdrop for one second
  $scope.action = function() {
    $timeout(function() {
    }, 1000);

  // Execute action on backdrop disappearing
  $scope.$on('backdrop.hidden', function() {
    // Execute action

  // Execute action on backdrop appearing
  $scope.$on('backdrop.shown', function() {
    // Execute action




Retains the backdrop.


Releases the backdrop.