How to use with angular 2

[vivdkool]

How to use with angular 2

[swiety85]

angular2gridster

[loftyduck]

I got this working with Angular 4 and webpack; exactly how and where you add code depends on your project but I'll explain the changes I made:

In package.json add grid-list and the necessary jquery libraries in your dependencies:

"dependencies": {
    "grid-list": "0.4.1",
    "jquery": "3.2.1",
    "jquery-ui": "1.12.1"
}

run npm install afterwards, if needed

In vendor.browser.ts (where 3rd party libraries/assets are required)

import 'jquery-ui/ui/widgets/draggable.js';
import '../node_modules/grid-list/src/gridList.js';
import '../node_modules/grid-list/src/jquery.gridList.js';

Then create your grid, I choose define it in the markup of a Component

<div class="cardWorkspace grid">
    <div data-h="1" data-w="2" class="ui-draggable"></hl2-card>
    <div data-h="1" data-w="2" class="ui-draggable"></hl2-card>
    <div data-h="1" data-w="2" class="ui-draggable"></hl2-card>
    <div data-h="1" data-w="2" class="ui-draggable"></hl2-card>
</div>

In the corresponding Component's class file you can then initialize gridList. Obviously you can do this in ngOnInit or triggered by something else and with your own gridList configuration.

    ngAfterViewInit() {
        this.zone.runOutsideAngular(() => {
            jquery('.cardWorkspace').gridList({
                direction: 'horizontal',
                itemSelector: 'div.ui-draggable',
                lanes: 4
            });
        });
    }

Also ensure your styles in the Component and parent components create the appropriate height and width that you want:

.cardWorkspace {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;

    div.ui-draggable {
        position: absolute
    }
}

There may be a few other styles, but mine are scattered so I'm not 100% sure I didn't miss one. If in doubt reference the demo site for what you might be missing.