fix: re-render when nested dynamic component

Author: lokesh-coder

projects/toppy/src/lib/template.html

@@ -9,7 +9,7 @@
       <ng-container *ngTemplateOutlet="content.data; context: { $implicit: content.props }"></ng-container>
     </ng-container>
     <ng-container *ngSwitchCase="'c'">
-      <ng-container *ngComponentOutlet="content.data; injector: createInj()"></ng-container>
+      <ng-container *ngComponentOutlet="content.data; injector: overlayInj || createInj"></ng-container>
     </ng-container>
   </ng-container>
 </div>

projects/toppy/src/lib/toppy.component.ts

@@ -34,6 +34,7 @@ export class ToppyComponent implements OnInit, AfterViewInit, OnDestroy {
   el: HTMLElement | any;
   wrapperEl: HTMLElement | any;
   extra: string;
+  overlayInj: Injector = null;
   private die: Subject<1> = new Subject();
 
   constructor(private inj: Injector, private cd: ChangeDetectorRef, private elRef: ElementRef) {}
@@ -54,15 +55,16 @@ export class ToppyComponent implements OnInit, AfterViewInit, OnDestroy {
     this.listenPos().subscribe();
   }
 
-  createInj(): Injector {
-    return newInjector(
+  get createInj(): Injector {
+    this.overlayInj = newInjector(
       {
         provide: ToppyOverlay,
         useFactory: () => new ToppyOverlay(this.content.props),
         deps: []
       },
       this.inj
     );
+    return this.overlayInj;
   }
 
   updateTextContent(data: string): void {