feat(interimElement): add onShowing event

Currently hideElement has an onRemoving event, this is the showElement equivalent. Useful when dealing with loading spinners that should disappear before the dialog shows.

Closes #4820.

src/components/dialog/dialog.js

@@ -361,6 +361,8 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
  *   - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
  *   - `parent` - `{element=}`: The element to append the dialog to. Defaults to appending
  *     to the root element of the application.
+ *   - `onShowing` `{function=} Callback function used to announce the show() action is
+ *     starting.
  *   - `onComplete` `{function=}`: Callback function used to announce when the show() action is
  *     finished.
  *   - `onRemoving` `{function=} Callback function used to announce the close/hide() action is

src/components/dialog/dialog.spec.js

@@ -359,6 +359,31 @@ describe('$mdDialog', function() {
   });
 
   describe('#build()', function() {
+    it('should support onShowing callbacks before `show()` starts', inject(function($mdDialog, $rootScope) {
+
+      var template = '<md-dialog>Hello</md-dialog>';
+      var parent = angular.element('<div>');
+      var showing = false;
+
+      $mdDialog.show({
+        template: template,
+        parent: parent,
+        onShowing: onShowing
+      });
+      $rootScope.$apply();
+
+      runAnimation();
+
+      function onShowing(scope, element, options) {
+        showing = true;
+        container = angular.element(parent[0].querySelector('.md-dialog-container'));
+        expect(arguments.length).toEqual(3);
+        expect(container.length).toBe(0);
+      }
+
+      expect(showing).toBe(true);
+    }));
+
     it('should support onComplete callbacks within `show()`', inject(function($mdDialog, $rootScope, $timeout, $mdConstant) {
 
       var template = '<md-dialog>Hello</md-dialog>';

src/core/services/interimElement/interimElement.js

@@ -596,11 +596,14 @@ function InterimElementProvider() {
          * optional auto-Hide
          */
         function showElement(element, options, controller) {
+          // Trigger onShowing callback before the `show()` starts
+          var notifyShowing = options.onShowing || angular.noop;
           // Trigger onComplete callback when the `show()` finishes
           var notifyComplete = options.onComplete || angular.noop;
 
           return $q(function (resolve, reject) {
             try {
+              notifyShowing(options.scope, element, options);
 
               // Start transitionIn
               $q.when(options.onShow(options.scope, element, options, controller))

src/core/services/interimElement/interimElement.spec.js

@@ -362,6 +362,28 @@ describe('$$interimElement service', function() {
         expect(autoClosed).toBe(true);
       }));
 
+      it('calls onShowing before onShow', inject(function() {
+        var onShowingCalled = false;
+
+        Service.show({
+          template: '<some-element />',
+          passingOptions: true,
+          onShowing: onShowing,
+          onShow: onShow
+        });
+
+        expect(onShowingCalled).toBe(true);
+
+        function onShowing(scope, el, options) {
+          expect(arguments.length).toEqual(3);
+          onShowingCalled = true;
+        }
+
+        function onShow(scope, el, options) {
+          expect(onShowingCalled).toBe(true);
+        }
+      }));
+
       it('calls onRemove', inject(function() {
         var onRemoveCalled = false;
         Service.show({