fix(sortable): unsubscribe item capture when component is destroyed

src/sortable/sortable.component.ts

@@ -4,13 +4,18 @@ import {
   Output,
   EventEmitter,
   forwardRef,
-  TemplateRef
+  TemplateRef,
+  OnDestroy,
+  HostListener,
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { DraggableItem } from './draggable-item';
 import { DraggableItemService } from './draggable-item.service';
 import { NgClass, NgStyle, NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 
+import { takeUntil } from "rxjs/operators";
+import { Subject } from "rxjs";
+
 @Component({
     selector: 'bs-sortable',
     exportAs: 'bs-sortable',
@@ -57,8 +62,10 @@ import { NgClass, NgStyle, NgIf, NgFor, NgTemplateOutlet } from '@angular/common
     standalone: true,
     imports: [NgClass, NgStyle, NgIf, NgFor, NgTemplateOutlet]
 })
-export class SortableComponent implements ControlValueAccessor {
+export class SortableComponent implements ControlValueAccessor, OnDestroy {
   private static globalZoneIndex = 0;
+  private _destroy$: Subject<boolean> = new Subject<boolean>();
+
   /** field name if input array consists of objects */
   @Input() fieldName?: string;
 
@@ -125,6 +132,7 @@ export class SortableComponent implements ControlValueAccessor {
     this.currentZoneIndex = SortableComponent.globalZoneIndex++;
     this.transfer
       .onCaptureItem()
+      .pipe(takeUntil(this._destroy$))
       .subscribe((item: DraggableItem) => this.onDrop(item));
   }
 
@@ -251,8 +259,13 @@ export class SortableComponent implements ControlValueAccessor {
     // with IE
     event.dataTransfer?.setData('Text', 'placeholder');
   }
-}
 
+  @HostListener('unloaded')
+  public ngOnDestroy(): void {
+    this._destroy$.next(true);
+    this._destroy$.complete();
+  }
+}
 export declare interface SortableItem {
   id: number;
   value: string;