Modules in Angular

Table of contents

• Overview
• Using modules in Angular
  • Step 1: Import the handsontable/base module
  • Step 2: Import modules and their registering functions
  • Step 3: Register the modules

Overview

To reduce the size of your app, you can use Handsontable by importing individual modules.

Using modules in Angular

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

Step 1: Import the handsontable/base module

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

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

// import the `handsontable/base` module
import Handsontable from 'handsontable/base';

Step 2: Import modules and their registering functions

Import the modules that you want to use (for the full list of Handsontable modules, see the modules cheatsheet).

Also, import those modules' registering functions.

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

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 the `NumericCellType` module and the `registerCellType()` function
import {
  registerCellType,
  NumericCellType,
} from 'handsontable/cellTypes';

// import the `UndoRedo` module and the `registerPlugin()` function
import {
  registerPlugin,
  UndoRedo,
} from 'handsontable/plugins';

Step 3: Register the modules

Register your modules, using the registering functions that you imported (for the full list of Handsontable's registering functions, see the modules cheatsheet):

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';

// register the `NumericCellType` module
registerCellType(NumericCellType);

// register the `UndoRedo` module
registerPlugin(UndoRedo);

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