Angular: Fix components disappearing on docs page on property change

code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts

@@ -1,4 +1,4 @@
-import { ApplicationRef, enableProdMode, importProvidersFrom, NgModule } from '@angular/core';
+import { ApplicationRef, enableProdMode, NgModule } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -14,16 +14,16 @@ type StoryRenderInfo = {
   moduleMetadataSnapshot: string;
 };
 
-const applicationRefs = new Set<ApplicationRef>();
+const applicationRefs = new Map<HTMLElement, ApplicationRef>();
 
 export abstract class AbstractRenderer {
   /**
    * Wait and destroy the platform
    */
-  public static resetApplications() {
+  public static resetApplications(domNode?: HTMLElement) {
     componentNgModules.clear();
-    applicationRefs.forEach((appRef) => {
-      if (!appRef.destroyed) {
+    applicationRefs.forEach((appRef, appDOMNode) => {
+      if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) {
         appRef.destroy();
       }
     });
@@ -50,7 +50,7 @@ export abstract class AbstractRenderer {
     }
   };
 
-  protected previousStoryRenderInfo: StoryRenderInfo;
+  protected previousStoryRenderInfo = new Map<HTMLElement, StoryRenderInfo>();
 
   // Observable to change the properties dynamically without reloading angular module&component
   protected storyProps$: Subject<ICollection | undefined>;
@@ -67,7 +67,7 @@ export abstract class AbstractRenderer {
     }
   }
 
-  protected abstract beforeFullRender(): Promise<void>;
+  protected abstract beforeFullRender(domNode?: HTMLElement): Promise<void>;
 
   protected abstract afterFullRender(): Promise<void>;
 
@@ -100,6 +100,7 @@ export abstract class AbstractRenderer {
 
     if (
       !this.fullRendererRequired({
+        targetDOMNode,
         storyFnAngular,
         moduleMetadata: {
           ...storyFnAngular.moduleMetadata,
@@ -112,7 +113,7 @@ export abstract class AbstractRenderer {
       return;
     }
 
-    await this.beforeFullRender();
+    await this.beforeFullRender(targetDOMNode);
 
     // Complete last BehaviorSubject and set a new one for the current module
     if (this.storyProps$) {
@@ -140,7 +141,7 @@ export abstract class AbstractRenderer {
       ],
     });
 
-    applicationRefs.add(applicationRef);
+    applicationRefs.set(targetDOMNode, applicationRef);
 
     await this.afterFullRender();
   }
@@ -171,22 +172,24 @@ export abstract class AbstractRenderer {
   }
 
   private fullRendererRequired({
+    targetDOMNode,
     storyFnAngular,
     moduleMetadata,
     forced,
   }: {
+    targetDOMNode: HTMLElement;
     storyFnAngular: StoryFnAngularReturnType;
     moduleMetadata: NgModule;
     forced: boolean;
   }) {
-    const { previousStoryRenderInfo } = this;
+    const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode);
 
     const currentStoryRender = {
       storyFnAngular,
       moduleMetadataSnapshot: stringify(moduleMetadata),
     };
 
-    this.previousStoryRenderInfo = currentStoryRender;
+    this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender);
 
     if (
       // check `forceRender` of story RenderContext

code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts

@@ -38,8 +38,8 @@ export class DocsRenderer extends AbstractRenderer {
     await super.render({ ...options, forced: false });
   }
 
-  async beforeFullRender(): Promise<void> {
-    DocsRenderer.resetApplications();
+  async beforeFullRender(domNode?: HTMLElement): Promise<void> {
+    DocsRenderer.resetApplications(domNode);
   }
 
   async afterFullRender(): Promise<void> {