feat(module): Updates to [email protected]

Fixes #479.

BREAKING CHANGE: [email protected] requires 'handsontable' to be
imported before zone.js, e.g. in polyfills.ts. See
handsontable/handsontable#4452

README.md

@@ -13,7 +13,9 @@ Native Angular2+ wrapper for [Handsontable](https://github.com/handsontable/hand
 
 2. If you are using SystemJS, add the ng2-handsontable path to your SystemJS.config.js: `'ng2-handsontable': 'node_modules/ng2-handsontable/bundles/ng2-handsontable.umd.js'`. Webpack (used by Angular-CLI) picks up the path automatically.
 
-3. Import the `HotTableModule` into your module. Here's a TypeScript example:
+3. As [Handsontable wraps the native Promise](https://github.com/handsontable/handsontable/issues/4452), **you will need to import handsontable before zone.js with `import 'handsontable'`**. Otherwise zone.js will throw an error. For an AngularCLI-project, the zone.js import happens in the `polyfill.ts` file.
+
+4. Import the `HotTableModule` into your module. Here's a TypeScript example:
 
 ```typescript
 import { HotTableModule } from 'ng2-handsontable';
@@ -30,7 +32,7 @@ export class MyModule {
 }
 ```
 
-4. Use the `hotTable` component in your template. The following example displays the supported attributes:
+5. Use the `hotTable` component in your template. The following example displays the supported attributes:
 
 ```html
 <hotTable [data]="data"
@@ -52,10 +54,10 @@ export class MyModule {
 
 The free version of Handsontable is used by default, but the pro-version could be used as a drop-in replacement.
 
-4. The following methods are available as a public API on HotTable component (which you can access from your parent component with `@ViewChild(HotTable) hotTableComponent`):
+6. The following methods are available as a public API on HotTable component (which you can access from your parent component with `@ViewChild(HotTable) hotTableComponent`):
 - `getHandsontableInstance(): Handsontable` - returns the underlying [Handsontable Core instance](https://docs.handsontable.com/Core.html); all registered Handsontable plugins are accessible via [instance.getPlugin()](https://docs.handsontable.com/pro/1.11.0/Core.html#getPlugin)
 
-5. See the [demo](http://valor-software.github.io/ng2-handsontable/) and the [demo sources](https://github.com/valor-software/ng2-handsontable/tree/master/demo/src) for further details.
+7. See the [demo](http://valor-software.github.io/ng2-handsontable/) and the [demo sources](https://github.com/valor-software/ng2-handsontable/tree/master/demo/src) for further details.
 
 
 ## Troubleshooting

demo/src/components/handsontable/personal-demo.ts

@@ -12,7 +12,7 @@ function headerRenderer(instance, td, row, col, prop, value, cellProperties) {
 
 function diffRenderer(instance, td, row, col, prop, value, cellProperties) {
   // tslint:disable-next-line:no-invalid-this
-  Handsontable['cellTypes'].formula.renderer.apply(this, arguments); // tslint:disable-line:no-string-literal
+  Handsontable.cellTypes['formula'].renderer.apply(this, arguments); // tslint:disable-line:no-string-literal
   td.style.backgroundColor = '#c3f89c';
   td.style.fontWeight = (col === 13 ? 'bold' : 'normal');
 }

demo/src/polyfills.ts

@@ -17,5 +17,6 @@ import 'core-js/es6/set';
 import 'core-js/es6/reflect';
 
 import 'core-js/es7/reflect';
+import 'handsontable'; // Unfortunately necessary for now: https://github.com/handsontable/handsontable/issues/4452
 import 'zone.js/dist/zone';
 import 'classlist-polyfill';

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ng2-handsontable-base",
-  "version": "1.0.4",
-  "description": "angular4 handsontable components",
+  "version": "2.0.0",
+  "description": "Angular4 Handsontable components",
   "private": true,
   "scripts": {
     "lite-server": "lite-server -c demo/bs-config.js",
@@ -38,7 +38,7 @@
   "keywords": [
     "angular",
     "angular2",
-    "angularjs",
+    "angular4",
     "handsontable",
     "table"
   ],
@@ -53,7 +53,7 @@
   },
   "homepage": "https://github.com/valor-software/ng2-handsontable#readme",
   "dependencies": {
-    "handsontable": "^0.31.0"
+    "handsontable": "^0.34.4"
   },
   "devDependencies": {
     "karma-coverage-istanbul-reporter": "1.3.0",
@@ -71,7 +71,6 @@
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
     "@angular/tsc-wrapped": "4.1.3",
-    "@types/handsontable": "0.31.1",
     "@types/jasmine": "2.5.48",
     "@types/marked": "0.0.28",
     "@types/node": "7.0.0",