Closed
Description
Error when adding widget
at GridStack.addWidget (gridstack.js:1492)
at ResultsTableComponent.ngAfterViewInit (results-table.component.ts:53)
at callHook (core.js:3037)
at callHooks (core.js:3007)
at executeInitAndCheckHooks (core.js:2959)
at refreshView (core.js:7386)
at refreshEmbeddedViews (core.js:8407)
at refreshView (core.js:7339)
at refreshEmbeddedViews (core.js:8407)
at refreshView (core.js:7339)
Your environment
- Angular 10
- gridstack.js is 1.1.2
- Chrome : Latest
NB : I am not using any of the Angular wrappers as these do not work with the latest version of GridStack
Steps to reproduce
NB: I tried to do this in stackblitz here
https://stackblitz.com/edit/angular-ivy-xacnjl
but unfortunately the scripts settings in angular.json does not seem to work
so I just get
ERROR TypeError: $ is not a function
at Function.GridStack.init (gridstack.js:2109)
Create simple Angular App
npm install [email protected]
add following lines to angular.json
"scripts": [
"node_modules/gridstack/dist/gridstack.all.js",
]
import {
Component,
ViewEncapsulation,
ChangeDetectionStrategy,
OnInit,
OnDestroy,
AfterViewInit,
ElementRef
} from '@angular/core';
import 'gridstack';
@Component({
selector: 'results-table',
template: `
<div class="grid-stack" id="results-grid">
</div> `,
styleUrls: ['./results-table.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ResultsTableComponent implements OnInit, OnDestroy, AfterViewInit {
private GridStack: GridStack = window[`GridStack`];
constructor() {
}
public ngOnInit(): void {
}
public ngAfterViewInit() {
const grid = this.GridStack.init({}, '#results-grid');
grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {width: 2});
}
}
Expected behaviour
Adds a widget
Actual behaviour
core.js:4196 ERROR ReferenceError: domAttr is not defined
at GridStack.addWidget (gridstack.js:1492)
Metadata
Metadata
Assignees
Labels
No labels