fix(moving): Remove some evt listeners and detach subscribers.

Author: MKirova

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -762,10 +762,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
                 fromEvent(document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))
                     .subscribe((res) => this.onPointerUp(res));
             }
-
-            this.element.nativeElement.addEventListener('transitionend', (args) => {
-                this.onTransitionEnd(args);
-            });
+            this.element.nativeElement.addEventListener('transitionend', this.onTransitionEnd.bind(this));
         });
 
         // Set transition duration to 0s. This also helps with setting `visibility: hidden` to the base to not lag.
@@ -789,6 +786,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
             }
         }
 
+        this.element.nativeElement.removeEventListener('transitionend', this.onTransitionEnd);
+
         if (this._containerScrollIntervalId) {
             clearInterval(this._containerScrollIntervalId);
             this._containerScrollIntervalId = null;
@@ -1194,12 +1193,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
             if (ghostDestroyArgs.cancel) {
                 return;
             }
-            this.ghostElement.remove();
-            this.ghostElement = null;
-            if (this._dynamicGhostRef) {
-                this._dynamicGhostRef.destroy();
-                this._dynamicGhostRef = null;
-            }
+            this.clearGhost();
         } else if (!this.ghost) {
             this.element.nativeElement.style.transitionProperty = '';
             this.element.nativeElement.style.transitionDuration = '0.0s';
@@ -1222,6 +1216,20 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
         });
     }
 
+    protected clearGhost() {
+        this.ghostElement.removeEventListener('pointermove', this.onPointerMove);
+        this.ghostElement.removeEventListener('pointerup', this.onPointerUp);
+        this.ghostElement.removeEventListener('lostpointercapture', this.onPointerLost);
+        this.ghostElement.removeEventListener('transitionend', this.onTransitionEnd);
+        this.ghostElement.remove();
+        this.ghostElement = null;
+
+        if (this._dynamicGhostRef) {
+            this._dynamicGhostRef.destroy();
+            this._dynamicGhostRef = null;
+        }
+    }
+
     /**
      * @hidden
      * Create ghost element - if a Node object is provided it creates a clone of that node,
@@ -1298,21 +1306,13 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
             if (this._pointerDownId !== null) {
                 this.ghostElement.setPointerCapture(this._pointerDownId);
             }
-            this.ghostElement.addEventListener('pointermove', (args) => {
-                this.onPointerMove(args);
-            });
-            this.ghostElement.addEventListener('pointerup', (args) => {
-                this.onPointerUp(args);
-            });
-            this.ghostElement.addEventListener('lostpointercapture', (args) => {
-                this.onPointerLost(args);
-            });
+            this.ghostElement.addEventListener('pointermove', this.onPointerMove.bind(this));
+            this.ghostElement.addEventListener('pointerup', this.onPointerUp.bind(this));
+            this.ghostElement.addEventListener('lostpointercapture', this.onPointerLost.bind(this));
         }
 
         // Transition animation when the ghostElement is released and it returns to it's original position.
-        this.ghostElement.addEventListener('transitionend', (args) => {
-            this.onTransitionEnd(args);
-        });
+        this.ghostElement.addEventListener('transitionend', this.onTransitionEnd.bind(this));
 
         this.cdr.detectChanges();
     }

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3911,7 +3911,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 this.onPinnedRowsChanged(change);
             });
 
-        this.addRowSnackbar?.clicked.subscribe(() => {
+        this.addRowSnackbar?.clicked.pipe(takeUntil(this.destroy$)).subscribe(() => {
             const rec = this.filteredSortedData[this.lastAddedRowIndex];
             this.scrollTo(rec, 0);
             this.addRowSnackbar.close();

projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, OnDestroy, Input, ElementRef, ViewContainerRef, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
 import { IgxDragDirective } from '../../directives/drag-drop/drag-drop.directive';
-import { Subscription, fromEvent } from 'rxjs';
+import { Subscription, fromEvent, takeUntil } from 'rxjs';
 import { PlatformUtil } from '../../core/utils';
 import { IgxColumnMovingService } from './moving.service';
 import { ColumnType } from '../common/grid.interface';
@@ -73,8 +73,7 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective implements On
                 source: this.column
             };
             this.column.grid.columnMovingStart.emit(movingStartArgs);
-
-            this.subscription$ = fromEvent(this.column.grid.document.defaultView, 'keydown').subscribe((ev: KeyboardEvent) => {
+            this.subscription$ = fromEvent(this.column.grid.document.defaultView, 'keydown').pipe(takeUntil(this._destroy)).subscribe((ev: KeyboardEvent) => {
                 if (ev.key === this.platformUtil.KEYMAP.ESCAPE) {
                     this.onEscape(ev);
                 }

src/app/app.component.ts

@@ -371,6 +371,11 @@ export class AppComponent implements OnInit {
             icon: 'view_column',
             name: 'Grid Toolbar'
         },
+        {
+            link: '/gridReCreate',
+            icon: 'view_column',
+            name: 'Grid ReCreate'
+        },
         {
             link: '/gridToolbarCustom',
             icon: 'view_column',

src/app/app.routes.ts

@@ -139,6 +139,7 @@ import { GridExportComponent } from './grid-export/grid-export.sample';
 import { DividerComponent } from './divider/divider.component';
 import { MonthPickerSampleComponent } from './month-picker/month-picker.sample';
 import { LabelSampleComponent } from "./label/label.sample";
+import { GridRecreateSampleComponent } from './grid-re-create/grid-re-create.sample';
 
 export const appRoutes: Routes = [
     {
@@ -483,6 +484,10 @@ export const appRoutes: Routes = [
         path: 'gridRowDrag',
         component: GridRowDraggableComponent
     },
+    {
+        path: 'gridReCreate',
+        component: GridRecreateSampleComponent
+    },
     {
         path: 'gridToolbar',
         component: GridToolbarSampleComponent

src/app/grid-re-create/grid-re-create.sample.html

@@ -0,0 +1,8 @@
+<div *ngIf="create">
+    <igx-grid   height="300px">
+        <igx-column [field]="'columnA'"></igx-column>
+        <igx-column [field]="'columnB'"></igx-column>
+     </igx-grid>
+</div>
+
+<button (click)="create = !create">Create/Destroy</button>

src/app/grid-re-create/grid-re-create.sample.scss

@@ -0,0 +1,30 @@
+import { NgFor, NgIf } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import {  IgxAvatarComponent, IgxColumnComponent, IgxGridComponent, IgxIconComponent, IgxListComponent, IgxListItemComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective } from 'igniteui-angular';
+
+
+@Component({
+    selector: 'app-grid-sample',
+    styleUrls: ['grid-re-create.sample.scss'],
+    templateUrl: 'grid-re-create.sample.html',
+    standalone: true,
+    providers: [
+    ],
+    imports: [NgIf, NgFor, IgxGridComponent, IgxColumnComponent,IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxIconComponent,
+         IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent,  IgxPageNavigationComponent]
+})
+export class GridRecreateSampleComponent implements OnInit {
+    public data = [] as any[];
+    public create = false;
+
+    public ngOnInit(): void {
+    //   new Array(100).fill({}).forEach((_, i) => {
+    //     this.data.push({
+    //       id: i,
+    //       columnA: `A ${i}`,
+    //       columnB: `B ${i}`,
+    //     });
+    //   });
+    }
+
+}