I am new to configuration part in npm, i am trying to use handsontable library in angular 2 project created using angular-cli (ng init). I added the typescript definition for the same.
Here is my app.compponent.ts
import { Component } from '@angular/core';
import 'handsontable/dist/handsontable.full.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
ngOnInit() {
}
ngAfterViewInit() {
const myData = [
["1", "2", "3", "4", "5", "6"]
];
const config = {
data: myData,
colHeaders: ['A', 'B', 'C', 'D', 'E', 'F'],
startRows: 5,
startCols: 5,
minSpareCols: 1,
//always keep at least 1 spare row at the right
minSpareRows: 1
//always keep at least 1 spare row at the bottom,
};
(<any>$("#test")).handsontable(config);
}
}
app.component.html
<h1>
<div id ="test"></div>
</h1>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularStart2</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
tsconfig.js
{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
gives me error:
ReferenceError: Handsontable is not defined at r.fn.init.$.fn.handsontable (http://localhost:4200/vendor.bundle.js:87583:26) at AppComponent.ngAfterViewInit (http://localhost:4200/main.bundle.js:79:20)
I have also tried to import in below way
import {Handsontable} from 'handsontable';
and it gives me following error
Uncaught Error: Cannot find module 'numbro'
at newRequire (handsontable.js:53) [<root>]
at :8000/vendor.bundle.js:102461:16 [<root>]
at Object.23.cellTypes (handsontable.js:4439) [<root>]
at newRequire (handsontable.js:58) [<root>]
I have tried all ways from https://github.com/handsontable/handsontable/issues/3627
At present, HandsOnTable officially do not support Angular 2. Refer Forum reference here. It is planned for Q1 this year. You can leave your vote for this feature here
Hence, you will have to use handsontable js & css files directly into angular2 app like this-
Step1: In Index.html, add these 2 lines-
<link rel="stylesheet" href="http://docs.handsontable.com/0.30.1/bower_components/handsontable/dist/handsontable.full.css">
<script src="http://docs.handsontable.com/0.30.1/bower_components/handsontable/dist/handsontable.full.js"></script>
Step2: Sample AppComponent.ts looks like this-
import { Component, AfterViewInit } from '@angular/core';
declare var Handsontable: any;
@Component({
selector: 'my-app',
template: `
<h3>Angular2 Final 2.0.0</h3>
<h2>Handsontable Performance Test (10000x100)</h2>
<div id="example"></div>
`
})
export class AppComponent implements AfterViewInit {
container: any;
hot: any;
ngAfterViewInit() {
this.container = document.getElementById('example');
this.hot = new Handsontable(this.container, {
data: Handsontable.helper.createSpreadsheetData(10000, 100),
rowHeaders: true,
colHeaders: true,
// performance tip: set constant size
colWidths: 80,
rowHeights: 23,
// performance tip: turn off calculations
autoRowSize: false,
autoColSize: false,
});
}
}
Result Output:
Please note - I am using angular2 Final version 2.0.0