How to use gridstack.js with Angular6 Project

Question

I am working on a Angular6 Project and I need to use gridstack.js, how should I use it in this version of project

I have checked libraries like gridster but they don't support nesting functionality.

I need the same functionality as being provided by gridstack with nesting support as well.Need help?

Mike Goodstadt · Answer 1 · 2020-12-01T12:11:50.297

7

UPDATE: As of this week (29 Nov 2020), Gridstack is now jQuery-free!

Gridstack still (as of March 2020) uses jQuery, which as it manipulates the DOM directly goes against the declarative approach of Angular. As @Adrian points out, while not impossible to achiveve, it may be worth avoiding until others are complete work on dropping jQuery from Gridstack.

In the meantime there are other non-jQuery packages that achieve the same goal:

Angular Gridster2 is popular: https://github.com/tiberiuzuld/angular-gridster2
Angular2Gridster is also well maintained: https://github.com/swiety85/angular2gridster
Angular2 Dashboard Grid unmaintained: https://github.com/drxwat/angular2-dashboard-grid

There may be others using Gridster2 that I have not come across, but you can check out a range of approaches here: https://angularscript.com/category/layout/

edited Dec 01 '20 at 12:11

answered Mar 07 '20 at 09:40

Mike Goodstadt

345
3
12

1

FYI it seems like work is complete on issue mentioned above and v3 is released... :) – Micko Nov 30 '20 at 10:17
1

Thanks @Micko - Please mark this answer as useful anyhows! – Mike Goodstadt Dec 01 '20 at 12:07
make sure to include `import 'gridstack/dist/h5/gridstack-dd-native';` in Angular project as described [here](https://github.com/gridstack/gridstack.js/#include) – Max Koretskyi Jul 30 '21 at 18:48

score 0 · Answer 2 · answered Apr 03 '19 at 05:47

0

Don't, gridstack is a jQuery plugin and including jQuery in an Angular project is breaking rule number one.

answered Apr 03 '19 at 05:47

Adrian Brand

20,384
4
39
60

so how can we achieve the gridstack functionality in an angular project – vishal Apr 03 '19 at 05:49
https://stackoverflow.com/questions/39901473/wrap-gridstack-js-into-angular-2-component?rq=1 – Adrian Brand Apr 03 '19 at 05:51
I have tried all of these suggestion over there, they didn't work for my angular6 project – vishal Apr 03 '19 at 06:18
Hi all - see my above answer and Micko's update :) – Mike Goodstadt Dec 01 '20 at 12:09

How to use gridstack.js with Angular6 Project

2 Answers2

Linked

Related