Angular-gridster2: Components that contain animations (chart.js/kendo UI chart) do not always animate when grid is drawn

[Shmo]

When placing components that use animations, for example a chart.js chart or a kendo ui chart, we are experiencing intermittent behaviour (even on a full page reload). Sometimes the animation will play through, other times the page will simply draw immediately. We have tried the same components outside of a gridster, gridster-item, and they always seem to animate correctly. Is there an event or something we should be taking into consideration

[tiberiuzuld]

Hi @Shmo ,
Possibly because at initialization of grid the elements have 0 width and height.
Try to wait for itemInitCallback maybe it will work. or the first call of itemResizeCallback.

[Shmo]

Our components rendered inside gridster-items are (usually) smart components that in turn contain "dumb" components, i.e they just get populated with some data and render a graph or some other data), they do not know that they are in a gridster-item. I am not sure how we would use these callbacks in that scenario (without injecting the item all the way down).

[tiberiuzuld]

The problem is that when angular inserts the items in the dom they have 0 width and height.
Will look into it on how to set the size faster.

Maybe that will solve your problem.

[tiberiuzuld]

Hi @Shmo ,
The issue appears because of ng-content is used for the contents of gridster-item is rendered.
The issue is that content is initialized at the same time as gridster-item way before the gridster-item has size.
So i changed so the itemInitCallback and initCallback is called only after the items have size.

So if you put your components like this it will start to render after initialization and will have size.
HTML

<gridster-item [item]="item" *ngFor="let item of dashboard">
      <your-component *ngIf="item.init"></your-component>
</gridster-item>

TS

static itemInit(item, itemComponent) {
   item.init = true;
}
this.options = {
   itemInitCallback: AppComponent.itemInit
}

This is the simplest change without making a major breaking change.

Let me know if this workaround will work for you.

Thanks

[Shmo]

Thank you for this, it is working as you said. The components now render with size. We still have a couple of issues but we believe this to be related to our fault in our how we are using chart.js. Thanks for the timely response.

[tiberiuzuld]

Great , good to know that is working.

Thanks