Angular 8 wrapper for gridstack.js
npm install @libria/gridstackbash
npm install @libria/gridstack --save
`
Then import the library on your root module (AppModule, for instance):
`bash
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GridstackModule } from '@libria/gridstack';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GridstackModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Since this library is a wrapper for a jquery plugin, you need to define some global plugins and styles.
$3
- Add the following to the .angular.json file
`bash
{
...,
"apps": [{
...
"styles": [
"../node_modules/gridstack/dist/gridstack.css",
...
],
"scripts": [
"../node_modules/lodash/lodash.min.js",
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jquery-ui-dist/jquery-ui.js",
"../node_modules/gridstack/dist/gridstack.js",
"../node_modules/gridstack/dist/gridstack.jQueryUI.js",
...
],
}]
}
`
Basic library usage
`bash
width="5">
x="0"
y="0"
width="3">
Widget 1