style(Dynamic Component): Remove hidden component's div from DOM

Author: hirokiterashima

src/assets/wise5/vle/node/node.component.html

@@ -9,21 +9,21 @@
       </div>
     }
     @for (component of components; track component) {
-      <div
-        id="component_{{ component.id }}"
-        class="component max-lg:!w-full"
-        [ngStyle]="{ width: component.componentWidth ? component.componentWidth + '%' : '100%' }"
-      >
-        @if (componentToVisible[component.id]) {
+      @if (componentToVisible[component.id]) {
+        <div
+          id="component_{{ component.id }}"
+          class="component max-lg:!w-full"
+          [ngStyle]="{ width: component.componentWidth ? component.componentWidth + '%' : '100%' }"
+        >
           <component
             [nodeId]="node.id"
             [componentId]="component.id"
             [componentState]="getComponentStateByComponentId(component.id)"
             [workgroupId]="workgroupId"
             (saveComponentStateEvent)="saveComponentState($event)"
           />
-        }
-      </div>
+        </div>
+      }
     }
     <div class="node-content__actions flex items-center gap-3">
       @if (node.showSaveButton) {