javascript - Implementing Gridstack 3 in Angular

Question

I'm following this example, trying to implement it in Angular.

I import as follows (no jQuery dependencies):

import * as GridStack from 'gridstack/dist/gridstack-h5';

And the code

ngAfterViewInit() {
    
  var items = [
      {content: 'my first widget'}, // will default to location (0,0) and 1x1
      {w: 2, content: 'another longer widget!'} // will be placed next at (1,0) and 2x1
   ];

    var grid = GridStack.init();
    grid.load(items);
}

But all I see is static divs instead of a grid, and there are no errors. What's missing?

Answer 1

Please post your HTML template.

Double check your config from GridStack Read Me, if you are using an ngfor then you need to see step 3 and invoke this on your main div $('.grid-stack').gridstack();

1. You must install:

---

yarn add gridstack
// or
npm install --save gridstack

// or
- npm i gridstack
- npm i jquery
- npm i jquery-ui-dist
- npm i --save-dev @types/gridstack
- npm i jquery-ui-touch-punch ( Optional, if you want mobile support )

2. You must configure angular.json file:

---

"styles": [
              "node_modules/gridstack/dist/gridstack.css",
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/jquery-ui-dist/jquery-ui.js",
              "node_modules/jquery-ui-touch-punch/jquery.ui.touch-punch.js", ( Optional, if you want mobile support )
              "node_modules/gridstack/dist/gridstack.js",
              "node_modules/gridstack/dist/gridstack.jQueryUI.js"
            ]  

3. What is your HTML template, like here

---

  ngAfterViewInit() {
        setTimeout(() => {
            $('.grid-stack').gridstack();
            this.gridStack = $('.grid-stack').data('gridstack');
        }, 300); //This MUST finish after dynamic data is retrieved for ngfor, and calling these statements in another area just doesn't work
    }

4. You must include the following in your Typscipt files- [ES6 or Typescript] 1

---

import 'gridstack/dist/gridstack.min.css';
import GridStack from 'gridstack';
// THEN to get HTML5 drag&drop
import 'gridstack/dist/h5/gridstack-dd-native';
// OR to get legacy jquery-ui drag&drop
import 'gridstack/dist/jq/gridstack-dd-jqueryui';
// OR nothing to get static grids (API driven, no user drag&drop)