Contrib > Close modal on route change

src/modules/column-selector/column-selector-modal.component.spec.ts

@@ -6,6 +6,10 @@ import {
   ComponentFixture
 } from '@angular/core/testing';
 
+import {
+  RouterTestingModule
+} from '@angular/router/testing';
+
 import {
   expect
 } from '@blackbaud/skyux-builder/runtime/testing/browser';
@@ -30,6 +34,7 @@ describe('Column selector component', () => {
         ColumnSelectorTestComponent
       ],
       imports: [
+        RouterTestingModule,
         SkyColumnSelectorModule,
         SkyModalModule
       ]

src/modules/list-column-selector-action/list-column-selector-action.spec.ts

@@ -12,6 +12,10 @@ import {
   NoopAnimationsModule
 } from '@angular/platform-browser/animations';
 
+import {
+  RouterTestingModule
+} from '@angular/router/testing';
+
 import {
   expect
 } from '@blackbaud/skyux-builder/runtime/testing/browser';
@@ -74,6 +78,7 @@ describe('List column selector action', () => {
         ListColumnSelectorActionTestComponent
       ],
       imports: [
+        RouterTestingModule,
         SkyListColumnSelectorActionModule,
         SkyListModule,
         SkyListToolbarModule,

src/modules/modal/fixtures/modal-fixtures.module.ts

@@ -1,6 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import {
+  RouterTestingModule
+} from '@angular/router/testing';
+
 import { SkyWindowRefService } from '../../window';
 
 import { SkyModalModule } from '../modal.module';
@@ -22,6 +26,7 @@ import { ModalTiledBodyTestComponent } from './modal-tiled-body.component.fixtur
   ],
   imports: [
     CommonModule,
+    RouterTestingModule,
     SkyModalModule
   ],
   providers: [

src/modules/modal/modal-adapter.service.ts

@@ -23,7 +23,10 @@ export class SkyModalAdapterService {
   }
 
   public removeHostEl(): void {
-    this.bodyEl.removeChild(this.docRef.querySelector('sky-modal-host'));
+    const element = this.docRef.querySelector('sky-modal-host');
+    if (element) {
+      this.bodyEl.removeChild(element);
+    }
   }
 
   public toggleFullPageModalClass(isAddFull: boolean): void {

src/modules/modal/modal-host.component.ts

@@ -2,11 +2,23 @@ import {
   Component,
   ComponentFactoryResolver,
   Injector,
+  OnDestroy,
   ReflectiveInjector,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
 
+import {
+  NavigationStart,
+  Router
+} from '@angular/router';
+
+import {
+  Subject
+} from 'rxjs/Subject';
+
+import 'rxjs/add/operator/takeUntil';
+
 import { SkyModalAdapterService } from './modal-adapter.service';
 import { SkyModalInstance } from './modal-instance';
 import { SkyModalHostService } from './modal-host.service';
@@ -20,7 +32,7 @@ import { SkyModalConfiguration } from './modal-configuration';
   viewProviders: [SkyModalAdapterService]
 })
 
-export class SkyModalHostComponent {
+export class SkyModalHostComponent implements OnDestroy {
   public get modalOpen() {
     return SkyModalHostService.openModalCount > 0;
   }
@@ -32,12 +44,20 @@ export class SkyModalHostComponent {
   @ViewChild('target', { read: ViewContainerRef })
   public target: ViewContainerRef;
 
+  private ngUnsubscribe = new Subject();
+
   constructor(
     private resolver: ComponentFactoryResolver,
     private adapter: SkyModalAdapterService,
-    private injector: Injector
+    private injector: Injector,
+    private router: Router
   ) { }
 
+  public ngOnDestroy() {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
   public open(modalInstance: SkyModalInstance, component: any, config?: IConfig) {
     let params: IConfig = Object.assign({}, config);
     let factory = this.resolver.resolveComponentFactory(component);
@@ -84,6 +104,14 @@ export class SkyModalHostComponent {
       modalInstance.close();
     });
 
+    this.router.events
+      .takeUntil(this.ngUnsubscribe)
+      .subscribe((event) => {
+        if (event instanceof NavigationStart) {
+          modalInstance.close();
+        }
+      });
+
     modalInstance.closed.subscribe(() => {
       closeModal();
     });

src/modules/modal/modal.component.spec.ts

@@ -6,6 +6,10 @@ import {
   TestBed
 } from '@angular/core/testing';
 
+import {
+  Router
+} from '@angular/router';
+
 import {
   expect,
   SkyAppTestUtility
@@ -27,6 +31,7 @@ import { SkyModalComponentAdapterService } from './modal-component-adapter.servi
 describe('Modal component', () => {
   let applicationRef: ApplicationRef;
   let modalService: SkyModalService;
+  let router: Router;
 
   function openModal(modalType: any, config?: Object) {
     let modalInstance = modalService.open(modalType, config);
@@ -55,15 +60,18 @@ describe('Modal component', () => {
     inject(
       [
         ApplicationRef,
-        SkyModalService
+        SkyModalService,
+        Router
       ],
       (
         _applicationRef: ApplicationRef,
-        _modalService: SkyModalService
+        _modalService: SkyModalService,
+        _router: Router
       ) => {
         applicationRef = _applicationRef;
         modalService = _modalService;
         modalService.dispose();
+        router = _router;
       }
     )
   );
@@ -268,6 +276,18 @@ describe('Modal component', () => {
     applicationRef.tick();
   }));
 
+  it('should close when the user navigates through history', fakeAsync(() => {
+    openModal(ModalTestComponent);
+
+    expect(document.querySelector('.sky-modal')).toExist();
+
+    router.navigate(['/']);
+
+    expect(document.querySelector('.sky-modal')).not.toExist();
+
+    applicationRef.tick();
+  }));
+
   it('should trigger the help modal when the help button is clicked', fakeAsync(() => {
     let modalInstance = openModal(ModalTestComponent, { helpKey: 'default.html' });
     spyOn(modalInstance, 'openHelp').and.callThrough();

src/modules/modal/modal.module.ts

@@ -1,6 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import {
+  RouterModule
+} from '@angular/router';
+
 import { SkyModalAdapterService } from './modal-adapter.service';
 import { SkyModalContentComponent } from './modal-content.component';
 import { SkyModalFooterComponent } from './modal-footer.component';
@@ -29,6 +33,7 @@ import { SkyErrorModalFormComponent } from '../error/error-modal-form.component'
   ],
   imports: [
     CommonModule,
+    RouterModule,
     SkyResourcesModule
   ],
   exports: [

src/modules/modal/modal.service.ts

@@ -1,6 +1,7 @@
 import {
   ApplicationRef,
   ComponentFactoryResolver,
+  ComponentRef,
   Injectable
 } from '@angular/core';
 
@@ -11,7 +12,8 @@ import { SkyModalConfigurationInterface as IConfig } from './modal.interface';
 
 @Injectable()
 export class SkyModalService {
-  private static hostComponent: SkyModalHostComponent;
+  private static host: ComponentRef<SkyModalHostComponent>;
+
   constructor(
     private resolver: ComponentFactoryResolver,
     private appRef: ApplicationRef,
@@ -43,18 +45,20 @@ export class SkyModalService {
       useValue: modalInstance
     });
 
-    SkyModalService.hostComponent.open(modalInstance, component, params);
+    SkyModalService.host.instance.open(modalInstance, component, params);
 
     return modalInstance;
   }
 
   public dispose() {
-    /* istanbul ignore else */
-    /* sanity check */
-    if (SkyModalService.hostComponent) {
-      SkyModalService.hostComponent = undefined;
-      this.adapter.removeHostEl();
+    if (SkyModalService.host) {
+      // Trigger the host component's OnDestroy method:
+      this.appRef.detachView(SkyModalService.host.hostView);
+      SkyModalService.host.destroy();
+      SkyModalService.host = undefined;
     }
+
+    this.adapter.removeHostEl();
   }
 
   private getConfigFromParameter(providersOrConfig: any) {
@@ -83,14 +87,14 @@ export class SkyModalService {
   }
 
   private createHostComponent() {
-    if (!SkyModalService.hostComponent) {
+    if (!SkyModalService.host) {
       let factory = this.resolver.resolveComponentFactory(SkyModalHostComponent);
 
       this.adapter.addHostEl();
 
       let cmpRef = this.appRef.bootstrap(factory);
 
-      SkyModalService.hostComponent = cmpRef.instance;
+      SkyModalService.host = cmpRef;
     }
   }
 }

src/modules/select-field/fixtures/select-field-fixtures.module.ts

@@ -10,6 +10,10 @@ import {
   FormsModule
 } from '@angular/forms';
 
+import {
+  RouterTestingModule
+} from '@angular/router/testing';
+
 import { SkySelectFieldModule } from '../select-field.module';
 
 import { SkySelectFieldTestComponent } from './select-field.component.fixture';
@@ -21,6 +25,7 @@ import { SkySelectFieldTestComponent } from './select-field.component.fixture';
   imports: [
     CommonModule,
     FormsModule,
+    RouterTestingModule,
     SkySelectFieldModule
   ],
   exports: [

src/modules/text-expand/text-expand.component.spec.ts

@@ -5,6 +5,11 @@ import {
 } from '@angular/core/testing';
 
 import { BrowserModule } from '@angular/platform-browser';
+
+import {
+  RouterTestingModule
+} from '@angular/router/testing';
+
 import { SkyWindowRefService } from '../window';
 import { TextExpandTestComponent } from './fixtures/text-expand.component.fixture';
 import { SkyTextExpandModule } from './text-expand.module';
@@ -34,6 +39,7 @@ describe('Text expand component', () => {
       ],
       imports: [
         BrowserModule,
+        RouterTestingModule,
         SkyTextExpandModule,
         SkyModalModule
       ],