feat(lib): public method to destroy embedded view

angular-extensions · May 20, 2020 · 68cc6b7 · 68cc6b7
1 parent 54fc6db
commit 68cc6b7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/...cts/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts b/...cts/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts
@@ -7,7 +7,8 @@ import {
   ComponentFactoryResolver,
   ChangeDetectorRef,
   Renderer2,
-  Inject
+  Inject,
+  EmbeddedViewRef
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
@@ -33,6 +34,8 @@ export class LazyElementDynamicDirective implements OnInit {
   >; // tslint:disable-line:no-input-rename
   @Input('axLazyElementDynamicModule') isModule: boolean | undefined; // tslint:disable-line:no-input-rename
 
+  private viewRef: EmbeddedViewRef<any> = null;
+
   constructor(
     @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
@@ -75,7 +78,7 @@ export class LazyElementDynamicDirective implements OnInit {
           }
           return this.document.createElement(name);
         };
-        this.vcr.createEmbeddedView(this.template);
+        this.viewRef = this.vcr.createEmbeddedView(this.template);
         this.renderer.createElement = originalCreateElement;
         this.cdr.markForCheck();
       })
@@ -98,4 +101,12 @@ export class LazyElementDynamicDirective implements OnInit {
         }
       });
   }
+
+  destroyEmbeddedView() {
+    if (this.viewRef && !this.viewRef.destroyed) {
+      this.viewRef.detach();
+      this.viewRef.destroy();
+      this.viewRef = null;
+    }
+  }
 }
diff --git a/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts b/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts
@@ -5,7 +5,8 @@ import {
   TemplateRef,
   ViewContainerRef,
   ComponentFactoryResolver,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  EmbeddedViewRef
 } from '@angular/core';
 
 import {
@@ -24,6 +25,8 @@ export class LazyElementDirective implements OnInit {
   @Input('axLazyElementErrorTemplate') errorTemplateRef: TemplateRef<any>; // tslint:disable-line:no-input-rename
   @Input('axLazyElementModule') isModule: boolean | undefined; // tslint:disable-line:no-input-rename
 
+  private viewRef: EmbeddedViewRef<any> = null;
+
   constructor(
     private vcr: ViewContainerRef,
     private template: TemplateRef<any>,
@@ -55,7 +58,7 @@ export class LazyElementDirective implements OnInit {
       .loadElement(this.url, elementTag, this.isModule, elementConfig?.hooks)
       .then(() => {
         this.vcr.clear();
-        this.vcr.createEmbeddedView(this.template);
+        this.viewRef = this.vcr.createEmbeddedView(this.template);
         this.cdr.markForCheck();
       })
       .catch(() => {
@@ -76,4 +79,12 @@ export class LazyElementDirective implements OnInit {
         }
       });
   }
+
+  destroyEmbeddedView() {
+    if (this.viewRef && !this.viewRef.destroyed) {
+      this.viewRef.detach();
+      this.viewRef.destroy();
+      this.viewRef = null;
+    }
+  }
 }