How to use fin-hypergrid library in Angular 6/Ionic 4

Question

Trying to use the fin-hypergrid library in Angular, think the import is wrong. It's not a native typescript library so not sure exactly how to import it.

Component/Page

import { Component, OnInit } from '@angular/core';
import * as Hypergrid from 'fin-hypergrid';

@Component({
  selector: 'app-markbook-new',
  templateUrl: './markbook-new.page.html',
  styleUrls: ['./markbook-new.page.scss']
})
export class MarkBookNewPage implements OnInit {

  constructor() {
    const data = [
        {
            "Name": "Alabama",
            "Code": "AL",
            "Capital": "Montgomery",
            "Statehood": "December 14, 1819",
            "Population": 4833722,
            "Area": 52420,
            "House Seats": 7
        }
    ];
    console.log(fin);
    const div = document.querySelector('div#json-example'),
      grid = new fin.Hypergrid(div, { data: data });
  }

  ngOnInit() {
  }

  async ionViewDidEnter() {

  }

}

HTML

<div id="json-example" style="position:relative; width:600px; height:100px"></div>

I get error Cannot Find fin

If I change import * as Hypergrid from 'fin-hypergrid'; to import * as fin from 'fin-hypergrid';

I get ERROR Error: Uncaught (in promise): TypeError: fin_hypergrid__WEBPACK_IMPORTED_MODULE_1__.Hypergrid is not a constructor

Library used:

https://github.com/fin-hypergrid/core

Above example taken from:

https://github.com/fin-hypergrid/build/blob/master/demo/basic.html

Answer 1

I am using fin-hypergrid 3.2.0 version. Here this answer will demonstrate how to use it inside the angular 2+.

<div id="json-example" #hypergrid></div>

import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as Hypergrid from 'fin-hypergrid';

@Component({
  selector: 'app-markbook-new',
  templateUrl: './markbook-new.page.html',
  styleUrls: ['./markbook-new.page.scss']
})
export class MarkBookNewPage implements OnInit, AfterViewInit {
  protected grid: Hypergrid;

  constructor() {
    const data = [
        {
            "Name": "Alabama",
            "Code": "AL",
            "Capital": "Montgomery",
            "Statehood": "December 14, 1819",
            "Population": 4833722,
            "Area": 52420,
            "House Seats": 7
        }
    ];
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
     this.grid = new Hypergrid('#' + 'json-example',
            {
              data: this._rowList,
              schema: [],
              canvasContextAttributes: { alpha: true }
            });
  }

  async ionViewDidEnter() {

  }

}

And you don't need schema: [], canvasContextAttributes: { alpha: true }, this will fix your problem. But you need to work more on getting grid to work.