/ S

JavaScript Data Grid 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 →