/ S

JavaScript Data Grid Modules in Angular

Table of contents

Import just the modules that you actually need, to reduce Handsontable's impact on the size of your Angular app.

Use modules in Angular

To use modules with Handsontable's Angular wrapper, follow the steps below:

Step 1: Import the base module

No matter which optional modules you use, you need to import the base module.

In the entry point file of your application, import the handsontable/base module:

import Handsontable from 'handsontable/base';

Step 2: Import optional modules

Import optional modules of your choice:

Import optional modules of your choice, along with their registering functions.

For example, to import the numeric cell type module and the UndoRedo plugin module:

import {
registerCellType, // cell types' registering function
NumericCellType,
} from 'handsontable/cellTypes';

import {
registerPlugin, // plugins' registering function
UndoRedo,
} from 'handsontable/plugins';

Step 3: Register your modules

Register your modules, to let Handsontable recognize them.

For example, to register the numeric cell type module and the UndoRedo plugin module:

registerCellType(NumericCellType);
registerPlugin(UndoRedo);

Full example

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HotTableModule } from '@handsontable/angular';

import Handsontable from 'handsontable/base';

import {
  registerCellType,
  NumericCellType,
} from 'handsontable/cellTypes';

import {
  registerPlugin,
  UndoRedo,
} from 'handsontable/plugins';

registerCellType(NumericCellType);
registerPlugin(UndoRedo);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HotTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

← Custom ID in Angular →