fix(toastr): dispose no longer used overlay container (#1873)

src/framework/theme/components/toastr/toastr-container.component.ts

@@ -6,13 +6,13 @@
 
 import { Component, Input, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { animate, style, transition, trigger } from '@angular/animations';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 import { NbToastComponent } from './toast.component';
 import { NbToast } from './model';
 import { NbLayoutDirectionService } from '../../services/direction.service';
 import { NbGlobalPosition, NbPositionHelper } from '../cdk/overlay/position-helper';
-import { takeWhile } from 'rxjs/operators';
-
 
 const voidState = style({
   transform: 'translateX({{ direction }}110%)',
@@ -37,6 +37,9 @@ const defaultOptions = { params: { direction: '' } };
   ],
 })
 export class NbToastrContainerComponent implements OnInit, OnDestroy {
+
+  protected destroy$ = new Subject<void>();
+
   @Input()
   content: NbToast[] = [];
 
@@ -51,20 +54,19 @@ export class NbToastrContainerComponent implements OnInit, OnDestroy {
 
   fadeIn;
 
-  protected alive: boolean = true;
-
   constructor(protected layoutDirection: NbLayoutDirectionService,
               protected positionHelper: NbPositionHelper) {
   }
 
   ngOnInit() {
     this.layoutDirection.onDirectionChange()
-      .pipe(takeWhile(() => this.alive))
+      .pipe(takeUntil(this.destroy$))
       .subscribe(() => this.onDirectionChange());
   }
 
   ngOnDestroy() {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   protected onDirectionChange() {

src/framework/theme/components/toastr/toastr.service.spec.ts

@@ -138,6 +138,7 @@ describe('toastr-container-registry', () => {
           },
         }
       },
+      dispose() {},
     };
 
     overlayStub = {
@@ -223,6 +224,16 @@ describe('toastr-container-registry', () => {
 
     expect(topEnd).toBe(topRight);
   });
+
+  it('should dispose overlay before replacing with new one', () => {
+    toastrContainerRegistry.get(NbGlobalLogicalPosition.TOP_END);
+
+    const overlayDisposeSpy = spyOn(containerStub, 'dispose');
+    documentStub._contains = false;
+    toastrContainerRegistry.get(NbGlobalLogicalPosition.TOP_END);
+
+    expect(overlayDisposeSpy).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe('toastr-container', () => {

src/framework/theme/components/toastr/toastr.service.ts

@@ -6,7 +6,7 @@
 
 import { ComponentFactoryResolver, ComponentRef, Inject, Injectable } from '@angular/core';
 
-import { NbComponentPortal } from '../cdk/overlay/mapping';
+import { NbComponentPortal, NbOverlayRef } from '../cdk/overlay/mapping';
 import { NbOverlayService, patch } from '../cdk/overlay/overlay-service';
 import { NbPositionBuilderService } from '../cdk/overlay/overlay-position';
 import { NbGlobalLogicalPosition, NbGlobalPosition, NbPositionHelper } from '../cdk/overlay/position-helper';
@@ -133,10 +133,14 @@ export class NbToastContainer {
   }
 }
 
+interface NbToastrOverlayWithContainer {
+  overlayRef: NbOverlayRef;
+  toastrContainer: NbToastContainer;
+}
 
 @Injectable()
 export class NbToastrContainerRegistry {
-  protected overlays: Map<NbGlobalPosition, NbToastContainer> = new Map();
+  protected overlays: Map<NbGlobalPosition, NbToastrOverlayWithContainer> = new Map();
 
   constructor(protected overlay: NbOverlayService,
               protected positionBuilder: NbPositionBuilderService,
@@ -148,24 +152,30 @@ export class NbToastrContainerRegistry {
   get(position: NbGlobalPosition): NbToastContainer {
     const logicalPosition: NbGlobalLogicalPosition = this.positionHelper.toLogicalPosition(position);
 
-    const container = this.overlays.get(logicalPosition);
-    if (!container || !this.existsInDom(container)) {
+    const overlayWithContainer = this.overlays.get(logicalPosition);
+    if (!overlayWithContainer || !this.existsInDom(overlayWithContainer.toastrContainer)) {
+      if (overlayWithContainer) {
+        overlayWithContainer.overlayRef.dispose();
+      }
       this.instantiateContainer(logicalPosition);
     }
 
-    return this.overlays.get(logicalPosition);
+    return this.overlays.get(logicalPosition).toastrContainer;
   }
 
   protected instantiateContainer(position: NbGlobalLogicalPosition) {
-    const container = this.createContainer(position);
-    this.overlays.set(position, container);
+    const toastrOverlayWithContainer = this.createContainer(position);
+    this.overlays.set(position, toastrOverlayWithContainer);
   }
 
-  protected createContainer(position: NbGlobalLogicalPosition): NbToastContainer {
+  protected createContainer(position: NbGlobalLogicalPosition): NbToastrOverlayWithContainer {
     const positionStrategy = this.positionBuilder.global().position(position);
     const ref = this.overlay.create({ positionStrategy });
     const containerRef = ref.attach(new NbComponentPortal(NbToastrContainerComponent, null, null, this.cfr));
-    return new NbToastContainer(position, containerRef, this.positionHelper);
+    return {
+      overlayRef: ref,
+      toastrContainer: new NbToastContainer(position, containerRef, this.positionHelper),
+    };
   }
 
   protected existsInDom(toastContainer: NbToastContainer): boolean {