January 8, 2016

Ionic Backdrop

❮❮ Previous
Next ❯❯

Ionic Backdrop : It shows the overlay above the content and below the popups, loading and other overlays. Method $ionicBackdrop.retain() and $ionicBackdrop.release() is used for backdrop in ionic. $ionicBackdrop.retain() is used to apply overlay over the content. $ionicBackdrop.release() is used to remove Ionic Backdrop from the content. Each time when $ionicBackdrop.retain() is called the $ionicBackdrop.release() method is also called. Here we are going to explain the ionic backdrop functionality with example and demo.

Ionic Backdrop

Here is syntax and example of ionic Backdrop-

Ionic Backdrop example

.controller('MainCtrl', function($scope, $ionicBackdrop, $timeout) { 
    // Your Logic Here..
     $scope.showIonicBackdrop = function() {
    $ionicBackdrop.retain();
    $timeout(function() {
      $ionicBackdrop.release();
    }, 5000);
  };

  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });

Try it »

Note : $ionicBackdrop service is mandatory before using. Make sure you have imported it.

You first need to import service of backdrop in controller then create a function which contains the ionic retain and release method. if you run the above example it will produce the following output –

Ionic Backdrop Example

More About Ionic Backdrop

Let us have more example of Ionic Backdrop.

Ionic Execute Action on Backdrop Disappear/Hidden

You Can Execute Action on backdrop disappear event as below –

Action on Backdrop Disappear/Hidden

.controller('MainCtrl', function($scope, $ionicBackdrop, $timeout, $rootScope) { 
    // Your Logic Here..
     $scope.showIonicBackdrop = function() {
    $ionicBackdrop.retain();
    $timeout(function() {
      $ionicBackdrop.release();
    }, 5000);
  };
 
 // Add action on backdrop disappearing
  $scope.$on('backdrop.hidden', function() {
    // Your action
  });
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });

Ionic Execute Action on Backdrop Appear/Show

You Can Execute Action on backdrop Appear event as below –

Ionic Execute Action on Backdrop Appear/Show

.controller('MainCtrl', function($scope, $ionicBackdrop, $timeout, $rootScope) { 
    // Your Logic Here..
     $scope.showIonicBackdrop = function() {
    $ionicBackdrop.retain();
    $timeout(function() {
      $ionicBackdrop.release();
    }, 5000);
  };
 
 // Add action on backdrop disappearing
  $scope.$on('backdrop.shown', function() {
    // Your action
  });
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });
Note : $rootScope service is required for the Action on backdrop appear/disappear..

Advertisements

Add Comment

📖 Read More


❮❮ Previous
Next ❯❯
,