Difference between slickgrid on Angular 1.5 and on Angular 2

RIGA, Latvia - July 16, 2020 - PRLog -- Diatom Enterprises possesses several years of expertise in AngularJS. On one of Diatom's recent projects, we had to explore how different versions of Angular work with grids. The task was to adapt a JavaScript data table component called SlickGrid for Angular 1.5 and Angular 2.0. SlickGrid is used for super-fast fetching and displaying 10,000 records. Our Research and Development department gave me the task of exploring this issue, and now I would like to share our experience configuring SlickGrid for different versions of Angular, as well as how to make it work with different browsers (Chrome is the default).

PART 1 – CONFIGURE SLICKGRID
For simplicity's sake, I will use the shorthand "Grid", for the SlickGrid JavaScript data table component.

The whole mechanism of javascript module of the "Grid" used is almost the same for the 1.5 and 2/4 versions of Angular (same internal API/logic). You need to prepare the Angular 1 and 2/4 frameworks differently in order to include the Grid.

The Grid for Angular 2.0 looks like this:

Using components makes it possible to use the Grid without any difficult configuration. For Angular 2.0, you just embed the <slick-grid> (for 1.5, I defined <slick-Grid-List>) element in any of your templates and pass a collection of data elements as an attribute. For Angular 1.5, I use list='<array of objects>', for Angular 2, [dataRows]='collection of IGridDataRow'.

Then, use subscribing to the event.

In Angular 1.5:
Attribute on <slick-Grid-List> – on-update=update(item)  – "update" must be a method in your scope.

In Angular 2/4:
You need to subscribe in the code to the "cellEditExit" event of SlickGrid javascript component.

To display data in the Angular 2.0 grid, you should use an IGridDataRow array; each element has a "value" property and it should be an array (of strings or any other type). You might need to convert your objects-style data items to an array (with arrays in each value).

PART 2 – MAKE IT WORK WITH DIFFERENT BROWSERS

Tweak the js "Slick.Grid.js" component to make records display correctly in Mozilla, Edge and IE.

CONCLUSION
I hope this article gave you an overview of how the js-component of SlickGrid can be used in Angular 1.5 and how to use SlickGrid. It has already been adapted by the Microsoft package for Angular 2.0 in a component-style. While SlickGrid works in Chrome by default, minor adjustments were introduced to correctly display grids in Mozilla and Internet Explorer.

Visit us at https://diatomenterprises.com/difference-between-slickgrid-on-angular-1-5-and-on-angular-2/ for details.