Showing posts with label ng2-handsontable. Show all posts
Showing posts with label ng2-handsontable. Show all posts


December 19, 2017
Angular 2 directive for Handsontable Native Angular2+ wrapper for Handsontable. Handsontable is a data grid component with an Excel-like appearance. Built in JavaScript, it integrates with any data source and comes with features like data validation, sorting, grouping, data binding or column ordering. Actively supported by the Handsoncode team and the GitHub community.

Quick start

  1. Add ng2-handsontable to your package.json or install with npm i ng2-handsontable --save.
  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. As Handsontable wraps the native Promise, 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:
     import { HotTableModule } from 'ng2-handsontable';
      imports: [
    export class MyModule {
  5. Use the hotTable component in your template. The following example displays the supported attributes:
  • data: any[] - data source
  • pageData: Observable<any[]> - observable data source for paged data
  • columns?: any[] - descriptors of columns that contains information regarding type, format, source, ... of particular column
  • colHeaders?: string[] - array of column headers, default column headers will be shown (or not be shown, it depends on other settings) if this parameter is undefined
  • colWidths?: number[] - array of column sizes, default column size will be applied if this parameter is undefined
  • options?: any - any of the Handsontable options
  • 'HANDSONTABLE_EVENT' - all Handsontable events are implemented as EventEmitters, e.g. (beforeInit)="onBeforeInit"
The free version of Handsontable is used by default, but the pro-version could be used as a drop-in replacement.
  1. The following methods are available as a public API on HotTableComponent (which you can access from your parent component with @ViewChild(HotTableComponent) hotTableComponent):
  1. See the demo and the demo sources for further details.

Note: Special thanks to Valor Software
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.