Changed: container should be a part of component template. #85 (#132)

Author: swistach

lib/ce/src/hot-table.component.ts

@@ -1,14 +1,13 @@
 import {
+  AfterContentInit,
   Component,
-  ElementRef,
+  Input,
   NgZone,
-  AfterContentInit,
   OnChanges,
   OnDestroy,
-  OnInit,
   SimpleChanges,
+  ViewChild,
   ViewEncapsulation,
-  Input,
 } from '@angular/core';
 import * as Handsontable from 'handsontable';
 import { HotTableRegisterer } from './hot-table-registerer.service';
@@ -18,13 +17,14 @@ import { HotColumnComponent } from './hot-column.component';
 @Component({
   // tslint:disable-next-line
   selector: 'hot-table',
-  template: '',
+  template: '<div #container [id]="hotId"></div>',
   encapsulation: ViewEncapsulation.None,
   providers: [ HotTableRegisterer, HotSettingsResolver ],
 })
-export class HotTableComponent implements AfterContentInit, OnChanges, OnDestroy, OnInit {
+export class HotTableComponent implements AfterContentInit, OnChanges, OnDestroy {
+  @ViewChild('container') public container;
+
   private hotInstance: Handsontable;
-  private container: HTMLDivElement;
   private columnsComponents: HotColumnComponent[] = [];
   // component inputs
   @Input() settings: Handsontable.GridSettings;
@@ -275,22 +275,11 @@ export class HotTableComponent implements AfterContentInit, OnChanges, OnDestroy
   @Input() unmodifyRow: (row: number) => void;
 
   constructor(
-    private el: ElementRef,
     private _ngZone: NgZone,
     private _hotTableRegisterer: HotTableRegisterer,
-    private _hotSettingsResolver: HotSettingsResolver
+    private _hotSettingsResolver: HotSettingsResolver,
   ) {}
 
-  ngOnInit(): void {
-    this.container = document.createElement('div');
-
-    if (this.hotId) {
-      this.container.id = this.hotId;
-    }
-
-    this.el.nativeElement.appendChild(this.container);
-  }
-
   ngAfterContentInit(): void {
     const options: Handsontable.GridSettings = this._hotSettingsResolver.mergeSettings(this);
 
@@ -305,7 +294,7 @@ export class HotTableComponent implements AfterContentInit, OnChanges, OnDestroy
     }
 
     this._ngZone.runOutsideAngular(() => {
-      this.hotInstance = new Handsontable(this.container, options);
+      this.hotInstance = new Handsontable(this.container.nativeElement, options);
     });
 
     if (this.hotId) {
@@ -324,14 +313,13 @@ export class HotTableComponent implements AfterContentInit, OnChanges, OnDestroy
   }
 
   ngOnDestroy(): void {
-    this.hotInstance.destroy();
+    this._ngZone.runOutsideAngular(() => {
+      this.hotInstance.destroy();
+    });
 
     if (this.hotId) {
       this._hotTableRegisterer.removeInstance(this.hotId);
     }
-
-    this.container.parentElement.removeChild(this.container);
-    this.container = void 0;
   }
 
   updateHotTable(newSettings: Handsontable.GridSettings): void {

lib/pro/src/hot-table.component.ts

@@ -1,14 +1,13 @@
 import {
+  AfterContentInit,
   Component,
-  ElementRef,
+  Input,
   NgZone,
-  AfterContentInit,
   OnChanges,
   OnDestroy,
-  OnInit,
   SimpleChanges,
   ViewEncapsulation,
-  Input,
+  ViewChild,
 } from '@angular/core';
 import * as Handsontable from 'handsontable-pro';
 import { HotTableRegisterer } from './hot-table-registerer.service';
@@ -18,14 +17,15 @@ import { HotColumnComponent } from './hot-column.component';
 @Component({
   // tslint:disable-next-line
   selector: 'hot-table',
-  template: '',
+  template: '<div #container [id]="hotId"></div>',
   encapsulation: ViewEncapsulation.None,
   providers: [ HotTableRegisterer, HotSettingsResolver ],
 })
 
-export class HotTableComponent implements AfterContentInit, OnChanges, OnDestroy, OnInit {
+export class HotTableComponent implements AfterContentInit, OnChanges, OnDestroy {
+  @ViewChild('container') public container;
+
   private hotInstance: Handsontable;
-  private container: HTMLDivElement;
   private columnsComponents: HotColumnComponent[] = [];
   // component inputs
   @Input() settings: Handsontable.GridSettings;
@@ -308,22 +308,11 @@ export class HotTableComponent implements AfterContentInit, OnChanges, OnDestroy
   @Input() hiddenRow: (row: number) => void;
 
   constructor(
-    private el: ElementRef,
     private _ngZone: NgZone,
     private _hotTableRegisterer: HotTableRegisterer,
-    private _hotSettingResolver: HotSettingsResolver
+    private _hotSettingResolver: HotSettingsResolver,
   ) {}
 
-  ngOnInit(): void {
-    this.container = document.createElement('div');
-
-    if (this.hotId) {
-      this.container.id = this.hotId;
-    }
-
-    this.el.nativeElement.appendChild(this.container);
-  }
-
   ngAfterContentInit(): void {
     const options: Handsontable.GridSettings = this._hotSettingResolver.mergeSettings(this);
 
@@ -338,7 +327,7 @@ export class HotTableComponent implements AfterContentInit, OnChanges, OnDestroy
     }
 
     this._ngZone.runOutsideAngular(() => {
-      this.hotInstance = new Handsontable(this.container, options);
+      this.hotInstance = new Handsontable(this.container.nativeElement, options);
 
       if (this.hotId) {
         this._hotTableRegisterer.registerInstance(this.hotId, this.hotInstance);
@@ -358,14 +347,13 @@ export class HotTableComponent implements AfterContentInit, OnChanges, OnDestroy
   }
 
   ngOnDestroy(): void {
-    this.hotInstance.destroy();
+    this._ngZone.runOutsideAngular(() => {
+      this.hotInstance.destroy();
+    });
 
     if (this.hotId) {
       this._hotTableRegisterer.removeInstance(this.hotId);
     }
-
-    this.el.nativeElement.removeChild(this.container);
-    this.container = void 0;
   }
 
   updateHotTable(newSettings: Handsontable.GridSettings): void {