Close the lightbox when the active route is changed, closes #108

MurhafSousli · Jul 3, 2018 · d099abd · d099abd
1 parent 82cec23
commit d099abd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/projects/lightbox/src/lib/lightbox.component.ts b/projects/lightbox/src/lib/lightbox.component.ts
@@ -1,6 +1,8 @@
 import { Component, HostBinding, HostListener, ChangeDetectionStrategy } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { Router, RouterEvent, NavigationStart } from '@angular/router';
 import { OverlayRef } from '@angular/cdk/overlay';
+import { filter, tap, take } from 'rxjs/operators';
 import { lightboxAnimations } from './lightbox.animation';
 
 @Component({
@@ -35,7 +37,13 @@ export class LightboxComponent {
     }
   }
 
-  constructor(public sanitizer: DomSanitizer) {
+  constructor(public sanitizer: DomSanitizer, router: Router) {
+    // Close the lightbox if the current route has changed
+    router.events.pipe(
+      filter((event: RouterEvent) => event instanceof NavigationStart),
+      tap(() => this.overlayRef.detach()),
+      take(1)
+    ).subscribe();
   }
 
 }
diff --git a/projects/lightbox/src/lib/lightbox.module.ts b/projects/lightbox/src/lib/lightbox.module.ts
@@ -1,4 +1,5 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { Gallery, GalleryModule } from '@ngx-gallery/core';
 
@@ -13,6 +14,7 @@ export function lightboxFactory(config: LightboxConfig, gallery: Gallery, overla
 
 @NgModule({
   imports: [
+    RouterModule,
     OverlayModule,
     GalleryModule
   ],