/ S

This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# Installation in Angular

Table of contents

# Overview

Angular installation and basic usage guide.

# 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"
  [data]="dataset"
  licenseKey="non-commercial-and-evaluation">
</hot-table>

← Basic example in Angular →