From 584f1d22f825cd493cfcaeb44ee45d96f70235ca Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 19 Jul 2023 14:09:10 +0300
Subject: [PATCH] Slider tabs: Fix initialization.

---
 .../tabs/slider-tabs.component.ts             | 63 ++++++++++---------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/sharedComponents/tabs/slider-tabs.component.ts b/sharedComponents/tabs/slider-tabs.component.ts
index 75c86cfd..bf05910a 100644
--- a/sharedComponents/tabs/slider-tabs.component.ts
+++ b/sharedComponents/tabs/slider-tabs.component.ts
@@ -145,37 +145,42 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
   }
   
   ngAfterViewInit() {
-    this.tabs.changes.subscribe(tabs => {
-      if (typeof document !== 'undefined' && this.tabs.length > 0) {
-        setTimeout(() => {
-          if (this.position === 'horizontal') {
-            this.slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
-            this.slider.clsActive = 'uk-slider-active';
-            this.slider.updateActiveClasses();
-            this.slider.slides.forEach((item, index) => {
-              if(!this.tabs.get(index).active) {
-                item.classList.remove('uk-active');
-              }
-            });
-            if (this.type === 'static') {
-              let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
-              tabs.show(this.activeIndex);
-              if (this.connect.includes('#')) {
-                this.scrollToStart();
-              }
-            } else if(this.type =='dynamic') {
-              this.activeIndex = this.tabs.toArray().findIndex(tab => tab.active);
-              this.slider.show(this.activeIndex);
-            } else if (this.type === 'scrollable') {
-              this.scrollable(this.slider);
-            }
-          } else {
-            this.scrollable();
-          }
-        });
-      }
+    this.initTabs();
+    this.tabs.changes.subscribe(() => {
+     this.initTabs();
     });
   }
+
+  public initTabs() {
+    if (typeof document !== 'undefined' && this.tabs.length > 0) {
+      setTimeout(() => {
+        if (this.position === 'horizontal') {
+          this.slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
+          this.slider.clsActive = 'uk-slider-active';
+          this.slider.updateActiveClasses();
+          this.slider.slides.forEach((item, index) => {
+            if(!this.tabs.get(index).active) {
+              item.classList.remove('uk-active');
+            }
+          });
+          if (this.type === 'static') {
+            let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
+            tabs.show(this.activeIndex);
+            if (this.connect.includes('#')) {
+              this.scrollToStart();
+            }
+          } else if(this.type =='dynamic') {
+            this.activeIndex = this.tabs.toArray().findIndex(tab => tab.active);
+            this.slider.show(this.activeIndex);
+          } else if (this.type === 'scrollable') {
+            this.scrollable(this.slider);
+          }
+        } else {
+          this.scrollable();
+        }
+      });
+    }
+  }
   
   private scrollToStart() {
     this.subscriptions.push(UIkit.util.on(this.connect, 'shown', (event): void => {