Resizing issue with mat-side-nav and gridster2

Question

When I toggle the Side-Nav, I wait for the response and then call gridster.resize():

 sideNavToggle() {
    this.sideNav.toggle().then(() => {
      this.gridster.resize();
    });
  }

Here is a full stack-blitz example.

Make sure to make the application window wide enough, so that gridster shows the desktop layout - or better Open the app in a new window.

Here is one example:
When I start the app the width of my gridster item tile is ~223 and it is displayed as expected.

When I now toggle the side-nav, the gridster item is resized correctly:

• when I use the dev-tools I can see that the new width of the tile is 252
• also the console log of the gridster resize callback shows that width of 252
• But the width in the component is wrong: it is still 223 (see the text in the tile):

itemComponent.width 252

When I toggle the side-nav again to open it, the same happens:

• the tile is correctly back to 223
• but the text in the tile still shows the width of 252
• it seems that the width in my tile always lags behind

Do you have any idea what I am missing?

Note: in my real application the tile contains a chart component which will auto-size based on it's parent div (which is in the tile). So it is important that that the dom-width/height in the tile is correct when the resize event has occurred.

Notes:

• this also happens with the latest 8.x release of Angular, angular-gridster2 and angular-material: stackblitz example

Answer 1

A good way to handle this is to use the angular-resize-event library.
Then we don't even need the gridster itemResizeCallback event

Here is an updated stackblitz example that uses the resize-sensor

Just attach the resize directive to your container (see file tile.component.html): e.g.

<p (resized)="onResized($event)">..</p>

and in the callback resize your chart, canvas, etc. (see file tile.component.ts)

onResized(event: ResizedEvent) {
  // resize your chart, canvas
  // maybe use event.newWidth / event.newHeight when required
}