Layout issues (style sheet missing) when used with RouteReuseStrategy (Angular)

[bschaeublin]

Subject of the issue

I'm using Angulars ReUseStrategy to cache Angular Components. In the case of my widgets they are able to refresh their inner content themselfes and it takes some time to build them up.

Unfortunately it seems that this library does have issues getting cached by Angulars ReUseStrategy - when navigating to a page and back, the layout gets corrupted.

Any tries to update / refresh the view using this libraries api methods fails (for example, using a resizeObserver and trigger updateAll or remove them from the dom and re-add them` - only a full reload of the application helps.

Your environment

• version of gridstack.js: gridstack-10.3.0
• which browser/OS: Chrome, Windows 11

Steps to reproduce

See video:

[adumesny]

would be good if you trimmed the example to bare minimum (use default 12 column, non responsive, a few widgets) and does it happen if you don't use DOM for loop but the gridOptions.children (which is recommended - see many ng examples)

[adumesny]

it appears the CSS file GS created dynamically is not re-created (in the grid parent) so gs-y | gs-h are ignored.. maybe try styleInHead:true

Update: fixed comment

[bschaeublin]

@adumesny firstly, thank you for maintaining this library and immediate response to my issue. You're right, I updated the sample to use as less special treatment as possible - even if I am using it differently. It still can be reproduced (with 12 columns, gridOptions.children, etc.).

I'm not sure if you really meant styleInHead:false as it should be the default value accordingly to the config - but thanks to your hint, i tried setting it to true and it fixed the issue!

I think this is a good enough workaround for me :-).

[adumesny]

ok by default I recall we create the custom CSS style sheet right before the grid (same parent so that would be DashboardComponent custom component). would be interesting to see what happens in this case and if GS could possibly be notified to check and re-create if missing... but guess you have a workaround.

this shows the issue (just need 2 widgets in different rows)

  gridOptions: GridStackOptions = {
    styleInHead: false, // setting this to true fixes the problem
    children: [
      { id: '1', x: 0, y: 0, w: 6, content: `widget 0` },
      { id: '2', x: 2, y: 1, w: 10, content: `widget 1` },
    ],
  };

I have not used AlwaysReUseStrategy before, so not sure how Ng keeps the component around and what happens to custom stylesheet GS needs to create.

don't forget to donate if you find this lib useful!

[adumesny]

no time to look, closing with workaround...