fix: maps in tab widget would not correctly initialize + prevent all tabs to load at same tiem

Author: AntoineRelief

apps/web-widgets/src/app/app.module.ts

@@ -96,7 +96,6 @@ const initializeAuthAndTranslations =
             );
           },
           complete: () => {
-            // console.log(translate.instant('kendo.datetimepicker.now'));
             resolve(null);
           },
         });

libs/shared/src/lib/components/widgets/tabs-settings/tab-main/tab-main.component.html

@@ -43,9 +43,11 @@
         </div>
       </div>
     </ng-container>
-    <shared-tab-settings
-      [tabGroup]="$any(tab)"
-      (delete)="onDeleteTab(i)"
-    ></shared-tab-settings>
+    <ng-template uiTabContent>
+      <shared-tab-settings
+        [tabGroup]="$any(tab)"
+        (delete)="onDeleteTab(i)"
+      ></shared-tab-settings>
+    </ng-template>
   </ui-tab>
 </ui-tabs>

libs/shared/src/lib/components/widgets/tabs/tab/tab.component.ts

@@ -23,5 +23,7 @@ export class TabComponent implements AfterViewInit {
   ngAfterViewInit(): void {
     const componentRef = this.content.createComponent(WidgetGridComponent);
     componentRef.setInput('widgets', this.structure);
+    /** To use angular hooks */
+    componentRef.changeDetectorRef.detectChanges();
   }
 }

libs/shared/src/lib/components/widgets/tabs/tabs.component.html

@@ -1,11 +1,15 @@
 <div class="h-full flex flex-col">
   <ui-tabs
+    [selectedIndex]="selectedIndex"
+    (openedTab)="selectedIndex = $event.index"
     class="h-full overflow-hidden"
     *ngIf="settings.tabs && settings.tabs.length > 0; else empty"
   >
     <ui-tab *ngFor="let tab of settings.tabs">
       <ng-container ngProjectAs="label">{{ tab.label }}</ng-container>
-      <shared-tab [structure]="tab.structure"></shared-tab>
+      <ng-template uiTabContent>
+        <shared-tab [structure]="tab.structure"></shared-tab>
+      </ng-template>
     </ui-tab>
   </ui-tabs>
   <ng-template #empty>

libs/shared/src/lib/components/widgets/tabs/tabs.component.ts

@@ -43,6 +43,8 @@ export class TabsComponent
   tabGroup?: UiTabsComponent;
   /** CDK portal. Allow to display part of the tab group element in another place */
   portal?: DomPortal;
+  /** Selected tab index */
+  selectedIndex = 0;
 
   /**
    * Tabs widget component.