Merge pull request #281 from IgniteUI/dkamburov/fix-268

Ensure element is attached to DOM when destroying igZoombar

Author: dkamburov

dist/npm/package.json

@@ -3,6 +3,7 @@
   "version": "5.0.3",
   "description" : "A packaged version of Ignite UI wrappers for Angular",
   "license": "MIT",
+  "types": "main.d.ts",
   "main": "bundles/igniteui-angular-wrappers.umd.js",
   "repository": {
     "type": "git",

src/igcontrolbase/igcontrolbase.ts

@@ -179,8 +179,11 @@ export class IgControlBase<Model> implements DoCheck {
     }
 
     ngOnDestroy() {
-        jQuery(this._el)[this._widgetName]("destroy");
-        jQuery(this._el).remove();
-        jQuery(this._nativeElement).remove();
+        // igZoombar should be attached to body when being destroyed
+        if (this._widgetName !== "igZoombar" || document.body.contains(this._el)) {
+            jQuery(this._el)[this._widgetName]("destroy");
+            jQuery(this._el).remove();
+            jQuery(this._nativeElement).remove();
+        }
     }
 }

tests/unit/igdatachart/chart.spec.ts

@@ -97,6 +97,24 @@ export function main() {
                 done();
             });
         });
+
+        it('Zoombar should destroy correctly', (done) => {
+            var template = '<div><div *ngIf="isChartAreaVisible"><ig-data-chart  widgetId="datachart1" [(options)]="opts"></ig-data-chart><ig-zoombar [(options)]="zoombarOpts" widgetId="zoombar"></ig-zoombar></div></div>';
+            TestBed.overrideComponent(TestComponent, {
+                set: {
+                    template: template
+                }
+            });
+            TestBed.compileComponents().then(() => {
+                let fixture = TestBed.createComponent(TestComponent);
+                fixture.detectChanges();
+                fixture.componentInstance.isChartAreaVisible = false;
+                fixture.detectChanges();
+                expect($(fixture.debugElement.nativeElement).find("#datachart1").data("igDataChart")).toBeUndefined();
+                expect($(fixture.debugElement.nativeElement).find("#zoombar").data("igZoombar")).toBeUndefined();
+                done();
+            });
+        });
     });
 }
 
@@ -110,6 +128,7 @@ class TestComponent {
     public opts2: any;
     private zoombarOpts: any;
     public data: Array<any>;
+    public isChartAreaVisible: boolean = true;
     @ViewChild(Infragistics.IgDataChartComponent) public viewChild: Infragistics.IgDataChartComponent;
     @ViewChild(Infragistics.IgZoombarComponent) public viewChild2: Infragistics.IgZoombarComponent;