Installation

Install Handsontable through your preferred package manager, and control your grid through the HotTableComponent props.

Install Handsontable

To install Handsontable locally using a package manager, run one of these commands:

1
npm install handsontable @handsontable/angular-wrapper

1
yarn add handsontable @handsontable/angular-wrapper

1
pnpm add handsontable @handsontable/angular-wrapper

Register Handsontable’s modules

Import and register all of Handsontable’s modules with a single function call (for example, in app.component.ts):

1
import Handsontable from "handsontable/base";
2
import { registerAllModules } from "handsontable/registry";
3

4
registerAllModules();

Or, to reduce the size of your JavaScript bundle, import only the modules that you need.

Configure global settings

You can set global configuration values for the table during the application setup (app.config.ts). Using the HOT_GLOBAL_CONFIG token, you can define an object that will be read within the wrapper. At any time, you can modify these values using the HotGlobalConfigService or override them at the individual table level. All properties of HotGlobalConfig object are optional.

1
import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
2
import { provideRouter } from "@angular/router";
3

4
import { routes } from "./app.routes";
5
import {
6
  HOT_GLOBAL_CONFIG,
7
  HotGlobalConfig,
8
  NON_COMMERCIAL_LICENSE,
9
} from "@handsontable/angular-wrapper";
10
import { registerLanguageDictionary, enUS } from "handsontable/i18n";
11

12
registerLanguageDictionary(enUS);
13

14
const globalHotConfig: HotGlobalConfig = {
15
  license: NON_COMMERCIAL_LICENSE,
16
  layoutDirection: "ltr",
17
  language: enUS.languageCode,
18
};
19

20
export const appConfig: ApplicationConfig = {
21
  providers: [
22
    { provide: HOT_GLOBAL_CONFIG, useValue: globalHotConfig },
23
  ],
24
};

Use the `HotTable` Component

The main Handsontable component is called HotTableComponent. To use it, you need to import the HotTableModule in your component or module.

1
import {
2
  HotTableModule,
3
} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  standalone: true,
7
  imports: [HotTableModule],
8
})

To set Handsontable’s configuration options, use GridSettings object. For example:

1
import { Component, ViewChild } from "@angular/core";
2
import {
3
  GridSettings,
4
  HotTableComponent,
5
  HotTableModule,
6
} from "@handsontable/angular-wrapper";
7

8
@Component({
9
  standalone: true,
10
  imports: [HotTableModule],
11
  template: ` <div>
12
    <hot-table [data]="data" [settings]="gridSettings" />
13
  </div>`,
14
})
15
export class HotTableWrapperComponent {
16
  @ViewChild(HotTableComponent, { static: false })
17
  readonly hotTable!: HotTableComponent;
18

19
  readonly data = [
20
    ["", "Tesla", "Volvo", "Toyota", "Ford"],
21
    ["2019", 10, 11, 12, 13],
22
    ["2020", 20, 11, 14, 13],
23
    ["2021", 30, 15, 12, 13],
24
  ];
25
  readonly gridSettings = <GridSettings>{
26
    rowHeaders: true,
27
    colHeaders: true,
28
    height: "auto",
29
    autoWrapRow: true,
30
    autoWrapCol: true,
31
  };
32
}

Preview the result

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example-installation',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
10
  </div>`,
11
})
12
export class ExampleInstallationComponent {
13

14
  readonly data = [
15
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
16
    ['2019', 10, 11, 12, 13],
17
    ['2020', 20, 11, 14, 13],
18
    ['2021', 30, 15, 12, 13],
19
  ];
20
  readonly gridSettings: GridSettings = {
21
    rowHeaders: true,
22
    colHeaders: true,
23
    height: 'auto',
24
    autoWrapRow: true,
25
    autoWrapCol: true
26
  };
27
}
28
/* end-file */
29

30

31
/* file: app.module.ts */
32
import { NgModule, ApplicationConfig } from '@angular/core';
33
import { BrowserModule } from '@angular/platform-browser';
34
import { registerAllModules } from 'handsontable/registry';
35
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
36
import { CommonModule } from '@angular/common';
37
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
38
/* start:skip-in-compilation */
39
import { ExampleInstallationComponent } from './app.component';
40
/* end:skip-in-compilation */
41

42
// register Handsontable's modules
43
registerAllModules();
44

45
export const appConfig: ApplicationConfig = {
46
  providers: [
47
    {
48
      provide: HOT_GLOBAL_CONFIG,
49
      useValue: {
50
        license: NON_COMMERCIAL_LICENSE,
51
      } as HotGlobalConfig
52
    }
53
  ],
54
};
55

56
@NgModule({
57
  imports: [ BrowserModule, HotTableModule, CommonModule ],
58
  declarations: [ ExampleInstallationComponent ],
59
  providers: [...appConfig.providers],
60
  bootstrap: [ ExampleInstallationComponent ]
61
})
62

63
export class AppModule { }
64
/* end-file */

1
<div>
2
  <example-installation></example-installation>
3
</div>

Supported versions of Angular

@handsontable/angular-wrapper requires at least Angular@16. If you use a lower version of Angular, you can use the @handsontable/angular package instead.

For more information on @handsontable/angular, see the 15.3 documentation.

Angular version	Handsontable wrapper
Older than 16	@handsontable/angular (deprecated)
16 and newer	@handsontable/angular-wrapper

Troubleshooting

If you’re using Angular 21 or newer, please note that older versions of @handsontable/angular-wrapper are incompatible due to recent breaking changes in Angular. To ensure smooth integration, upgrade to @handsontable/angular-wrapper@16.2 or later.

Server Side Rendering (SSR)

Currently, HotTable cannot be rendered on the server-side. If your application uses SSR, render it only in the browser using an *ngIf* statement.

1
import { CommonModule, isPlatformBrowser } from "@angular/common";
2
import { Component, inject, PLATFORM_ID } from "@angular/core";
3
import { GridSettings, HotTableModule } from "@handsontable/angular-wrapper";
4

5
import { registerAllModules } from "handsontable/registry";
6

7
registerAllModules();
8

9
@Component({
10
  selector: "app-root",
11
  imports: [HotTableModule, CommonModule],
12
  templateUrl: "./app.html",
13
  styleUrl: "./app.scss",
14
})
15
export class App {
16
  private platformId = inject(PLATFORM_ID);
17
  readonly isBrowser = isPlatformBrowser(this.platformId);
18

19
  readonly data = [
20
    ["", "Tesla", "Volvo", "Toyota", "Ford"],
21
    ["2019", 10, 11, 12, 13],
22
    ["2020", 20, 11, 14, 13],
23
    ["2021", 30, 15, 12, 13],
24
  ];
25
  readonly gridSettings: GridSettings = {
26
    rowHeaders: true,
27
    colHeaders: true,
28
    height: "auto",
29
    autoWrapRow: true,
30
    autoWrapCol: true,
31
    manualRowResize: true,
32
    manualColumnResize: true,
33
  };
34
}

1
<div>
2
  <ng-container *ngIf="isBrowser">
3
    <hot-table [data]="data" [settings]="gridSettings" />
4
  </ng-container>
5
</div>

Related guides

Modules

Configuration options

Hooks

beforeInitWalkontable

construct