displaying gridstackItem with Angular

[skxnyc]

Below is my code to display the widgets with gridstack.

However as below, the gs-y and gs-h are getting ignored, and it causes the items to get overlapped on each other on the top level.

[skxnyc]

I don't see any issue when the gs-x, gs-y, gs-w, gs-h are hardcoded.

[adumesny]

please don't open another 'bug'!
read the react/vue examples where you have to init gridstack AFTER the DOM items have all been created. ngFor is tricky as it updates live and I don't recall the hooks to be notified on top of my head.... makeWidget()/removeWidget() are what you'll need.

[skxnyc]

Just an FYI...
The hook is ngAfterViewInit and with the hook, it displays the initial items fine. But, when adding more items, newly added items are not getting properly displayed (they are getting overlapped, and not draggable/resizable). So I would say it doesn't really work with ngFor at the moment.

Now, I sort of made it work with makeWidget() by creating component dynamically with componentFactoryResolver. But I said "sort of" because this is not very stable. once in a few times, on initialize, the items are not respecting what's passed in like below.

[andrea-spotsoftware]

@skxnyc do you have any plunkr? I'm working on this problem too

[adumesny]

FYI, I created an ngFor sample under https://github.com/gridstack/gridstack.js/blob/master/demo/angular-ngFor.ts
BUT it doesn't track ngOnChanges() correctly so updates to the list is not reflected correctly.

My personal usage of Angular uses componentFactoryResolver to dynamically created components, so I know when to gridstack makeWidget()/removeWidget() - but it's not opened sourced.