Wrap gridstack.js into Angular 2 component

Question

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 proj

Answer 1

Tutorials

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.

Tool

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

Example

---

my-grid-stack.component.html

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