Implement ngOnDestroy for Igniteui Angular Components

Author: dkamburov

src/igniteui.angular2.ts

@@ -1152,6 +1152,8 @@ export class IgControlBase<Model> implements DoCheck {
 	protected _events: Map<string, string>;
 	protected _allowChangeDetection = true;
 	private _evtEmmiters : any = {};
+	private _changeDetectionInterval: any;
+	private _nativeElement:any;
 
 	set options(v: Model) {
 		if (this._config !== undefined && this._config !== null) {
@@ -1178,6 +1180,7 @@ export class IgControlBase<Model> implements DoCheck {
 
 	constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers) {
 		this._differs = differs;
+		this._nativeElement = el.nativeElement;
 		this._widgetName = this.convertToCamelCase(el.nativeElement.nodeName.toLowerCase());//ig-grid -> igGrid
 		this._el = el.nativeElement.appendChild(document.createElement(NODES[el.nativeElement.nodeName.toLowerCase()]));
 
@@ -1245,7 +1248,7 @@ export class IgControlBase<Model> implements DoCheck {
 			this.changeDetectionInterval = 500;
 		}
 
-		setInterval(function () {
+		this._changeDetectionInterval = setInterval(function () {
 			that._allowChangeDetection = true;
 		}, this.changeDetectionInterval);
 
@@ -1388,6 +1391,13 @@ export class IgControlBase<Model> implements DoCheck {
 			return group[1].toUpperCase();
 		});
 	}
+
+	ngOnDestroy() {
+		clearInterval(this._changeDetectionInterval);
+		jQuery(this._el)[this._widgetName]("destroy");
+		jQuery(this._el).remove();
+		jQuery(this._nativeElement).remove();
+	}
 }
 
 export class IgGridBase<Model> extends IgControlBase<Model> implements AfterContentInit {

tests/unit/ighierarchicalgrid/hierarchicalgrid.spec.ts

@@ -171,16 +171,17 @@ export function main() {
                 fixture.detectChanges();
                 //expand first record 
                 var row = $("#grid1").igGrid("rowAt", 0);
-                $("#grid1").igHierarchicalGrid("expand", row);
-                //change data child data
-                fixture.componentInstance.data[0].Products.removeAt(0);
+                $("#grid1").igHierarchicalGrid("expand", row, () => {
+					//change data child data
+					fixture.componentInstance.data[0].Products.removeAt(0);
 
-                setTimeout(() => {
-                    fixture.detectChanges();
-                    expect($(fixture.debugElement.nativeElement).find("#grid1").igHierarchicalGrid("option", "dataSource")[0].Products.length)
-                        .toBe(0);
-                    done();
-                }, 10);
+					setTimeout(() => {
+						fixture.detectChanges();
+						expect($(fixture.debugElement.nativeElement).find("#grid1").igHierarchicalGrid("option", "dataSource")[0].Products.length)
+							.toBe(0);
+						done();
+					}, 10);
+				});
             });
         });
 
@@ -196,15 +197,16 @@ export function main() {
                 fixture.detectChanges();
                 //expand first record 
                 var row = $("#grid1").igGrid("rowAt", 0);
-                $("#grid1").igHierarchicalGrid("expand", row);
-                //change data child data
-                fixture.componentInstance.data[0].Products[0].Name = "Custom Name";
-                setTimeout(() => {
-                    fixture.detectChanges();
-                    expect($($(fixture.debugElement.nativeElement).find("#grid1_0_Products_child").igGrid("cellAt", 1, 0)).text())
-                        .toBe("Custom Name");
-                        done();
-                }, 10);
+                $("#grid1").igHierarchicalGrid("expand", row, () => {
+					//change data child data
+					fixture.componentInstance.data[0].Products[0].Name = "Custom Name";
+					setTimeout(() => {
+						fixture.detectChanges();
+						expect($($(fixture.debugElement.nativeElement).find("#grid1_0_Products_child").igGrid("cellAt", 1, 0)).text())
+							.toBe("Custom Name");
+							done();
+					}, 10);
+				});
             });
         });
     });