I'm currently attempting to incorporate the following plugin: https://github.com/gridstack/gridstack.js into a brand new Angular 5 (Typescript) project, but I've encountered this particular error:
https://i.sstatic.net/UOibd.png
I've installed the jQuery library using the command: npm install gridstack
This is the code snippet I'm working with:
app.component.ts
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor() {}
ngOnInit() {
$(document).ready(function(){
// This part works fine.
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '5em'}, "slow");
});
// However, this part fails !!!
$('.grid-stack').gridstack();
});
}
}
app.component.html
<div style="text-align:center">
<h1>
Hello World!
</h1>
<button>Start Animation</button>
<div style="border:1px solid #555;border-radius:3px;color:white;background:#555;height:105px;width:260px;position:relative; margin-top:10px">jQuery</div>
<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>
</div>
Check out the demo displaying the error here: https://stackblitz.com/edit/angular-1sidhl