How to use handsontable library in angular 2

Question

How to use handsontable library in angular 2

5.5k Views Asked by Shirish At 09 April 2025 at 08:54

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

Original Q&A

There are 3 best solutions below

Shirish On 24 January 2017 at 11:28

Thanks for response,

@TSW I tried to install both packages "numbro" as well as "pikaday" but it didnt worked out.

@Sanket thanks for solution but as i am using angular cli i found that adding following snippet in angular-cli.json works

"scripts": [
            "./../node_modules/jquery/dist/jquery.min.js",
            "./../node_modules/handsontable/dist/handsontable.full.min.js"
        ],

Could this be possible only by importing handsontable by declaring it in package.json as handsontable downloads numbro and pikaday by itself. why it is needed to use "handsontable.full.min.js"

tilo On 15 June 2017 at 06:52

This does not answer our question for now, but development on the official wrapper for Angular 2+ is scheduled for June.

Update (August 29, 2017): We now see progress on the development of the official Angular2+ wrapper, which may be found here: https://github.com/handsontable/angular-handsontable

**Sanket** · Accepted Answer

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

How to use handsontable library in angular 2

There are 3 best solutions below

Related Questions in TYPESCRIPT

Related Questions in NPM

Related Questions in HANDSONTABLE

Related Questions in ANGULAR2-COMPONENTS

Related Questions in ANGULAR2-CLI

Trending Questions

Popular # Hahtags

Popular Questions