I have some Angular 1 experience, but we have a need to use gridstack.js in an Angular 2 project.
We are familiar with the gridstack-angular project, but that project is in Angular 1. I think the biggest thing I am having trouble with is the Angular 2 concepts.
Any help would be appreciated.
Okay for begginers the Angular 2 Quickstart is the best.
Then that continues and moves into the Tour of Heroes. Which is also a fantastic tutorial.
For the tutorials, and quite frankly building ANY Angular 2 app, I would highly recommend using Angular-Cli. It makes building Angular 2 apps a breeze
Just take a look at the Angular-Cli's Table of Contents to see what it can do
my-grid-stack.component.html
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item"
data-gs-x="4" data-gs-y="0"
data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content"></div>
</div>
</div>
my-grid-stack.component.ts (How to get JQuery in Angular 2)
import { Component, OnInit } from '@angular/core';
declare var $: any; // JQuery
@Component({
selector: 'app-my-gridstack',
templateUrl: './app/my-grid-stack/my-grid-stack.component.html',
styleUrls: ['./app/my-grid-stack/my-grid-stack.component.css']
})
export class MyGridStackComponent implements OnInit {
constructor() { }
ngOnInit() {
var options = {
cell_height: 80,
vertical_margin: 10
};
$('.grid-stack').gridstack(options);
}
}
Then I would put the gridstack.js
file in the src/assets/libs/gridstack
folder.
Then don't forget to import in your index.html
<script src="assets/libs/gridstack/gridstack.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With