Angular Data Grid Installation

Angular Data GridInstallation

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

On this page

Install Handsontable

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

Import Handsontable's CSS

Import Handsontable's CSS into your application to styles.scss.

@import "handsontable/styles/handsontable.min.css";
@import "handsontable/styles/ht-theme-main.min.css";

Register Handsontable's modules

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

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

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.

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

import { routes } from "./app.routes";
import {
  HOT_GLOBAL_CONFIG,
  HotGlobalConfig,
  NON_COMMERCIAL_LICENSE,
} from "@handsontable/angular-wrapper";

const globalHotConfig: HotGlobalConfig = {
  license: NON_COMMERCIAL_LICENSE,
  layoutDirection: "ltr",
  language: "en",
  themeName: "ht-theme-main",
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    { provide: HOT_GLOBAL_CONFIG, useValue: globalHotConfig },
  ],
};

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.

import {
  HotTableModule,
} from '@handsontable/angular-wrapper';

@Component({
  standalone: true,
  imports: [HotTableModule],
})

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

import { Component, ViewChild } from "@angular/core";
import {
  GridSettings,
  HotTableComponent,
  HotTableModule,
} from "@handsontable/angular-wrapper";

@Component({
  standalone: true,
  imports: [HotTableModule],
  template: ` <div>
    <hot-table themeName="ht-theme-main" [data]="data" [settings]="gridSettings" />
  </div>`,
})
export class HotTableWrapperComponent {
  @ViewChild(HotTableComponent, { static: false })
  readonly hotTable!: HotTableComponent;

  readonly data = [
    ["", "Tesla", "Volvo", "Toyota", "Ford"],
    ["2019", 10, 11, 12, 13],
    ["2020", 20, 11, 14, 13],
    ["2021", 30, 15, 12, 13],
  ];
  readonly gridSettings = <GridSettings>{
    rowHeaders: true,
    colHeaders: true,
    height: "auto",
    autoWrapRow: true,
    autoWrapCol: true,
  };
}

Preview the result

    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 (opens new window).

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

    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.