Installation in Angular

Overview

Angular installation and basic usage guide.

Install with npm

This component needs the Handsontable library to work. Use npm (opens new window) 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"
  [data]="dataset"
  licenseKey="non-commercial-and-evaluation">
</hot-table>