fix(core): add complete subscriptions on destroy

SAP · Jul 22, 2022 · 3874f78 · 3874f78
1 parent 4588fe7
commit 3874f78
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 24 deletions.
diff --git a/libs/core/src/lib/overflow-layout/overflow-layout.component.ts b/libs/core/src/lib/overflow-layout/overflow-layout.component.ts
@@ -230,22 +230,28 @@ export class OverflowLayoutComponent implements AfterViewInit, OnDestroy, Overfl
 
     /** @hidden */
     ngAfterViewInit(): void {
-        this._overflowLayoutService.detectChanges.subscribe(() => {
-            this._cdr.detectChanges();
-        });
-
-        this._overflowLayoutService.onResult.subscribe((result) => {
-            this._hiddenItems = result.hiddenItems;
-            this._showMore = result.showMore;
-            this.hiddenItemsCount.emit(result.hiddenItems.length);
-            this.visibleItemsCount.emit(this._allItems.filter((i) => !i.hidden).length);
-            this._cdr.detectChanges();
-        });
-
-        this._items.changes.subscribe(() => {
-            this._allItems = this._items.toArray();
-            this._cdr.detectChanges();
-        });
+        this._subscription.add(
+            this._overflowLayoutService.detectChanges.subscribe(() => {
+                this._cdr.detectChanges();
+            })
+        );
+
+        this._subscription.add(
+            this._overflowLayoutService.onResult.subscribe((result) => {
+                this._hiddenItems = result.hiddenItems;
+                this._showMore = result.showMore;
+                this.hiddenItemsCount.emit(result.hiddenItems.length);
+                this.visibleItemsCount.emit(this._allItems.filter((i) => !i.hidden).length);
+                this._cdr.detectChanges();
+            })
+        );
+
+        this._subscription.add(
+            this._items.changes.subscribe(() => {
+                this._allItems = this._items.toArray();
+                this._cdr.detectChanges();
+            })
+        );
 
         this._allItems = this._items.toArray();
         this._cdr.detectChanges();

diff --git a/libs/core/src/lib/overflow-layout/overflow-layout.service.ts b/libs/core/src/lib/overflow-layout/overflow-layout.service.ts
@@ -1,5 +1,5 @@
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import { ElementRef, Injectable, Optional, QueryList } from '@angular/core';
+import { ElementRef, Injectable, OnDestroy, Optional, QueryList } from '@angular/core';
 import { resizeObservable, RtlService } from '@fundamental-ngx/core/utils';
 import { debounceTime, distinctUntilChanged, filter, Observable, skip, Subject, Subscription } from 'rxjs';
 import { OverflowLayoutItemContainerDirective } from './directives/overflow-layout-item-container.directive';
@@ -26,7 +26,7 @@ export class OverflowLayoutListeningResult {
 }
 
 @Injectable()
-export class OverflowLayoutService {
+export class OverflowLayoutService implements OnDestroy {
     /**
      * Overflow Layout config.
      */
@@ -81,6 +81,11 @@ export class OverflowLayoutService {
     /** @hidden */
     constructor(private _elRef: ElementRef<HTMLElement>, @Optional() private _rtlService: RtlService | null) {}
 
+    /** @hidden */
+    ngOnDestroy(): void {
+        this._subscription.unsubscribe();
+    }
+
     startListening(config: OverflowLayoutConfig): void {
         this.setConfig(config);
         this.fitVisibleItems();
@@ -283,13 +288,13 @@ export class OverflowLayoutService {
             return;
         }
 
-        const rtlSub = this._rtlService.rtl.subscribe((isRtl) => {
-            this._dir = isRtl ? 'rtl' : 'ltr';
-
-            this._keyboardEventsManager = this._keyboardEventsManager.withHorizontalOrientation(this._dir);
-        });
+        this._subscription.add(
+            this._rtlService.rtl.subscribe((isRtl) => {
+                this._dir = isRtl ? 'rtl' : 'ltr';
 
-        this._subscription.add(rtlSub);
+                this._keyboardEventsManager = this._keyboardEventsManager.withHorizontalOrientation(this._dir);
+            })
+        );
     }
 
     /** @hidden */