Angular Data GridModules in Angular

Reduce the size of your Angular app by importing only the modules that you need and use.

Use modules in Angular
Related guides

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

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 { }