/ S

This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# 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 →