JavaScript Data Grid Installation in Angular

Angular Data GridInstallation in Angular

Install Handsontable's Angular wrapper via npm, import the stylesheets, and get your application up and running.

On this page

Install with npm

This component needs the Handsontable library to work. Use npm to install the packages.

npm install handsontable @handsontable/angular

Basic usage

Import the Handsontable styles to your project.

@import '~handsontable/dist/handsontable.full.css';

Import the Handsontable component in your module.

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

// register Handsontable's modules
registerAllModules();

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

TIP

You can reduce the size of your bundle by importing and registering only the modules that you need.

Now, you can use the Handsontable component in your HTML files.

<hot-table
  [colHeaders]="true"
  [rowHeaders]="true"
  autoWrapRow={true}
  autoWrapCol={true}
  licenseKey="non-commercial-and-evaluation">
</hot-table>