fix(bootstrap): modal wont animate when closing via clicking outside …

…of modal bounds

fix(vex): modal wont animate on close/dismiss

src/components/angular2-modal/overlay/overlay.component.ts

@@ -1,6 +1,7 @@
 declare const clearTimeout: any;
 
 import {
+  ApplicationRef,
   Component,
   ComponentRef,
   ElementRef,
@@ -35,12 +36,29 @@ export class ModalOverlay extends BaseDynamicComponent {
   @ViewChild('vcRef', {read: ViewContainerRef}) private vcRef: ViewContainerRef;
 
   constructor(private dialogRef: DialogRef<any>,
+              private appRef: ApplicationRef,
               el: ElementRef,
               sanitizer: DomSanitizationService) {
     super(sanitizer, el);
     this.activateAnimationListener();
   }
 
+  /**
+   * Performs an ApplicationRef.tick
+   *
+   */
+  tick(): void {
+    // this.cdr.markForCheck();
+    // this.cdr.detectChanges();
+    this.appRef.tick();
+
+    // TODO:
+    // Change detection doesn't run after doing some operations in plugins.
+    // this function is a workaround for those situations. (see bootstrap/vex modal implementations)
+    // strange enough, only ApplicationRef.tick() works, the CDR does not... probably due to
+    // the need to trigger from a higher change detector, needs investigation.
+  }
+
   addComponent<T>(type: any, bindings?: ResolvedReflectiveProvider[]): ComponentRef<T> {
     return super._addComponent<T>(type, this.vcRef, bindings);
   }

src/components/angular2-modal/overlay/overlay.service.ts

@@ -9,7 +9,7 @@ import { OverlayContext } from '../models/overlay-context';
 const _stack = new DialogRefStack<any>();
 
 @Injectable()
-export abstract class Overlay {
+export class Overlay {
   /**
    * A Default view container ref, usually the app root container ref.
    * Make sure not to provide something that might get destroyed, it will destroy the modals too.

src/components/angular2-modal/plugins/bootstrap/modal.ts

@@ -81,6 +81,14 @@ export class Modal extends Modal_ {
 
       backdrop.removeClass('in');
       container.removeClass('in');
+      // TODO:
+      // Change detection doesn't run after removing these classes, not even in 'nextTurn'
+      // e.g: backdrop.removeClass('in', true);
+      // the only solution is to change immediately and tick the change detection.
+      // this only happen when clicking outside of the bounds (overlayDialogBoundary).
+      // oddly using ChangeDetectorRef.detectChanges() doesn't work... ???
+      // running inside zone didn't help.
+      overlay.tick();
 
       backdrop.animationEnd$.first().subscribe(type => completer.resolve());
 

src/components/angular2-modal/plugins/vex/modal.ts

@@ -77,6 +77,15 @@ export class Modal extends Modal_ {
     overlay.beforeDestroy(() => {
       overlay.addClass('vex-closing');
 
+      // TODO:
+      // Change detection doesn't run after removing these classes, not even in 'nextTurn'
+      // e.g: backdrop.removeClass('in', true);
+      // the only solution is to change immediately and tick the change detection.
+      // This happen for every click (unlike bootstrap plugin).
+      // oddly using ChangeDetectorRef.detectChanges() doesn't work... ???
+      // running inside zone didn't help.
+      overlay.tick();
+
       const completer = new PromiseCompleter<void>();
       container.animationEnd$.first().subscribe(type => completer.resolve());
       return completer.promise;