Jspreadsheet with Angular

Installing Jspreadsheet in an angular project

%npm install Jspreadsheet-pro

Running Example:

Click here to see the project running on codesandbox.



Source code

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as Jspreadsheet from "Jspreadsheet-pro";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("spreadsheet") spreadsheet: ElementRef;
  title = "CodeSandbox";

  ngAfterViewInit() {
    Jspreadsheet(this.spreadsheet.nativeElement, {
      data: [[]],
      columns: [
        { type: "dropdown", width: "100px", source: ["Y", "N"] },
        { type: "color", width: "100px", render: "square" }
      ],
      minDimensions: [10, 10]
    });
  }
}

NOTE: Make sure to import the Jspreadsheet.css in your angular.json

"styles": ["styles.css","./node_modules/Jspreadsheet-pro/dist/jspreadsheet.css"],


Base angular project using Jspreadsheet

View source