/ S

Angular Data Grid Installation in Angular

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

In this article

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 { }

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

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

← Basic example in Angular →