how to use SlickGrid (jQuery legacy library) in Angular 4

Question

I'm trying to get a legacy jQuery library called SlickGrid working in Angular 4 and I cannot seem to figure out the best way to do that (I'm also new to Angular 4 so that doesn't help). So far, I found an npm package for @types/slickgrid and installed it. I then try to import it in my component with this

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import {Grid} from 'slickgrid';

However this throws me some error in the console

app.component.ts(5,24): error TS2306: File 'C:/demo/node_modules/@types/slickgrid/index.d.ts' is not a module.

I also tried with this import 'slickgrid' but I get the same error

Here is my full component.ts file

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import {Grid} from 'slickgrid';

@Component({
    selector: 'my-app',
    template: `<td valign='top' width='50%'>
        <div id='myGrid' style='width:600px;height:500px;'></div>
    </td>`
})
export class AppComponent implements OnInit {

    ngOnInit(): void {
        let grid;
        let columns = [
        {id: 'title', name: 'Title', field: 'title'},
        {id: 'duration', name: 'Duration', field: 'duration'},
        {id: '%', name: '% Complete', field: 'percentComplete'},
        {id: 'start', name: 'Start', field: 'start'},
        {id: 'finish', name: 'Finish', field: 'finish'},
        {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven'}
        ];
        let options = {
        enableCellNavigation: true,
        enableColumnReorder: false
        };
        let data = [];
        for (let i = 0; i < 500; i++) {
        data[i] = {
            title: 'Task ' + i,
            duration: '5 days',
            percentComplete: Math.round(Math.random() * 100),
            start: '01/01/2009',
            finish: '01/05/2009',
            effortDriven: (i % 5 === 0)
        };
        }
        $(() => {
        grid = new Grid('#myGrid', data, columns, options);
        });
    }
}

And my index.html where I import the libraries (I could go with WebPack eventually, if I can get this going)

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <link rel="stylesheet" type="text/css" href="/node_modules/slickgrid-6pac/slick.grid.css"/>
    <link rel="stylesheet" type="text/css" href="/components/css/SlickGrid.css"/>
    </head>
    <body>
        <my-app> Loading... </my-app>
    </body>
    <script src="/node_modules/slickgrid-6pac/lib/jquery-1.11.2.js"></script>
    <script src="/node_modules/slickgrid-6pac/lib/jquery.event.drag-2.2.js"></script>
    <script src="/node_modules/underscore/underscore-min.js"></script>
    <script src="/node_modules/slickgrid-6pac/slick.core.js"></script>
    <script src="/node_modules/slickgrid-6pac/slick.grid.js"></script>
    <!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>
    <script src="/node_modules/zone.js/dist/zone.min.js"></script>
    <script src="/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/dist/basic_slickgrid_ts/systemjs.config.js"></script>
    <script>
    System.import('app').catch(function(err){ console.error(err); });
    </script>
</html>

I really need to get this working and I don't know what else to try.

you can non typings approach this link might be useful [link](https://rahulrsingh09.github.io/AngularConcepts/faq) . the one question that links third party js without typings — Rahul Singh, Sep 01 '17 at 22:11
thanks I would definitely look at it, seems even better since I don't have to rely on a type definition that might be out of date. — ghiscoding, Sep 01 '17 at 22:25
amazing I got it working, if you'd like to post it as an answer I would certainly accept it and upvote it. Thanks a lot — ghiscoding, Sep 01 '17 at 22:47
i had given this answer before but the context is always different everyone wants a different flavour . Some want modal and some something else. This is the link to the answer it was for a modal https://stackoverflow.com/a/45387777/2708210 — Rahul Singh, Sep 01 '17 at 22:55
awesome, I up voted it there then. I will post my own answer since it's really different indeed. This is a good weekend start :) — ghiscoding, Sep 01 '17 at 22:56

ghiscoding · Accepted Answer · 2022-04-12T17:56:08.260

Thanks a lot to @Rahul Singh who posted a comment that answers my question. With the instructions shown below, I was able to create a new Open Source lib Angular-Slickgrid which everyone can now enjoy.

Install Angular-CLI and modify the angular-cli.json file

{
  "apps": [
  {
    "styles": [
      "../node_modules/slickgrid/slick.grid.css",
      "styles.css"
    ],
    "scripts": [
      "../node_modules/slickgrid/lib/jquery-1.8.3.js",
      "../node_modules/slickgrid/lib/jquery.event.drag-2.2.js",
      "../node_modules/slickgrid/slick.core.js",
      "../node_modules/slickgrid/slick.grid.js"
    ],    
}

Do an npm install of the legacy library

npm install slickgrid

add <div> for the grid in the component.html file

<div id='myGrid' style='width:600px;height:500px;'></div>

and finally the component.ts

import { Component, OnInit } from '@angular/core';
import $ from 'jquery/dist/jquery';
import jQuery from 'jquery/dist/jquery';

// using external js modules in Angular
declare var Slick: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  ngOnInit(): void {
      let grid;
      const columns = [
        {id: 'title', name: 'Title', field: 'title'},
        {id: 'duration', name: 'Duration', field: 'duration'},
        {id: '%', name: '% Complete', field: 'percentComplete'},
        {id: 'start', name: 'Start', field: 'start'},
        {id: 'finish', name: 'Finish', field: 'finish'},
        {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven'}
      ];
      const options = {
        enableCellNavigation: true,
        enableColumnReorder: false
      };
      let data = [];
      for (let i = 0; i < 500; i++) {
        data[i] = {
          title: 'Task ' + i,
          duration: '5 days',
          percentComplete: Math.round(Math.random() * 100),
          start: '01/01/2009',
          finish: '01/05/2009',
          effortDriven: (i % 5 === 0)
        };
      }
      $(() => {
        grid = new Slick.Grid('#myGrid', data, columns, options);
      });
  }
}

and it works, again thanks @Rahul

just to chime in here, i maintain the most active branch (6pac). i get regular requests for a packaged version, but not having had anything to do with npm beyond the very basic, i don't really know how to construct a package correctly. if anyone who knows npm or any of the other package managers wants to put together a package, preferably one that doesn't disrupt the codebase for developers who use a different (or no) package manager, i'd be happy to integrate it into my github repo. — Ben McIntyre, Sep 04 '17 at 00:23

how to use SlickGrid (jQuery legacy library) in Angular 4

1 Answers1