angular-slickgrid 6.1.0 → 6.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +67 -39
  2. package/esm2022/app/modules/angular-slickgrid/components/angular-slickgrid.component.mjs +7 -13
  3. package/esm2022/app/modules/angular-slickgrid/constants.mjs +2 -3
  4. package/esm2022/app/modules/angular-slickgrid/modules/angular-slickgrid.module.mjs +6 -7
  5. package/esm2022/app/modules/angular-slickgrid/services/angularUtil.service.mjs +5 -6
  6. package/esm2022/app/modules/angular-slickgrid/services/container.service.mjs +5 -6
  7. package/esm2022/app/modules/angular-slickgrid/services/translater.service.mjs +5 -6
  8. package/fesm2022/angular-slickgrid.mjs +18 -23
  9. package/fesm2022/angular-slickgrid.mjs.map +1 -1
  10. package/package.json +9 -9
package/README.md CHANGED
@@ -46,22 +46,27 @@ You like to use **Angular-Slickgrid**? Be sure to upvote :star: and maybe suppor
46
46
  ## Latest News & Releases
47
47
  Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/releases) section for all latest News & Releases.
48
48
 
49
+ ## Troubleshooting / Documentation
50
+ The Wiki is where all the documentation and instructions will go, so please consult the [Angular-Slickgrid - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki) before opening any issues. The [Wiki - HOWTO](https://github.com/ghiscoding/Angular-Slickgrid/wiki/HOWTO---Step-by-Step) is a great place to start with. You can also take a look at the [Demo page](https://ghiscoding.github.io/Angular-Slickgrid), it includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).
51
+
52
+ For common issues, see the [Troubleshooting Section](#troubleshooting-section) below
53
+
49
54
  ## Angular Compatibility
50
55
 
51
- > **Note** please be aware that only the latest version of Angular-Slickgrid, shown in the table below, can receive bug fixes because that is already a lot of work for a single developer like me.
56
+ > **Note** please be aware that only the latest version of Angular-Slickgrid, shown in the table below, is supported and can receive bug fixes. It's already a lot of work for a single developer like me, so hopefully you will understand.
52
57
 
53
58
  | Angular-Slickgrid | Angular version | Migration Guide | Notes |
54
59
  |-------------------|-----------------------|-----------------|------|
55
- | 6.x | >=16.0 | [Migration 6.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-6.x) | removal of jQuery (now uses browser native code), uses Slickgrid-Universal [3.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v3.0.0) version |
56
- | 5.x | >=14.0 | [Migration 5.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-5.x) | removal of jQueryUI, uses Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) version |
57
- | 4.x | >=13.0 | [Migration 4.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-4.x) | for Ivy build only, uses Slickgrid-Universal [1.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v1.1.1) version |
58
- | 3.x | >=12.0 | [Migration 3.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-3.x) | the lib now uses [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo version [v0.19.2](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v0.19.2). Also, IE11 is EOL and no longer supported. |
60
+ | 6.x | >=16.0 | [Migration 6.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-6.x) | removal of jQuery (now uses browser native code), it uses Slickgrid-Universal [3.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v3.0.0) version |
61
+ | 5.x | >=14.0 | [Migration 5.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-5.x) | removal of jQueryUI, it uses Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) version |
62
+ | 4.x | >=13.0 | [Migration 4.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-4.x) | for Ivy build only, it uses Slickgrid-Universal [1.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v1.1.1) version |
63
+ | 3.x | >=12.0 | [Migration 3.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-3.x) | the lib now uses [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo [v0.19.2](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v0.19.2). Also, IE11 is EOL and no longer supported. |
59
64
  | 2.x | 7-11.x | [Migration 2.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-2.x) | support multiple grids on same page |
60
65
  | 1.x | 4-6.x | | |
61
66
 
62
67
  **Note** For a full compatibility table of Angular-Slickgrid with Slickgrid-Universal, please take a look at the [Versions Compatibility Table - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table).
63
68
 
64
- For Angular 12+ see the instructions below - [Angular 12 with WebPack 5 - polyfill issue](https://github.com/ghiscoding/Angular-Slickgrid#angular-12-with-webpack-5---how-to-fix-polyfill-error).
69
+ For Angular 12+ see the instructions below - [Angular 12 with WebPack 5 - polyfill issue](#angular-12-with-webpack-5---how-to-fix-polyfill-error).
65
70
 
66
71
  ### ngx-translate Compatibility
67
72
 
@@ -75,28 +80,16 @@ Angular-Slickgrid uses `ngx-translate` library to support Locales, it is also re
75
80
  | 8-9 | 12.x |
76
81
  | 7 | 11.x |
77
82
 
78
- ### `ngcc` Build Warnings (Angular >=8.0 && <16.0)
79
- You might get warnings about SlickGrid while doing a production build, most of them are fine and the best way to fix them, is to simply remove/ignore the warnings to CommonJS packages, all you have to do is to add a file named `ngcc.config.js` in your project root (same location as the `angular.json` file) with the following content (you can also see this [commit](https://github.com/ghiscoding/angular-slickgrid-demos/commit/1fe8092bcd2e99ede5ab048f4a7ebe6254e4bee0) which fixes the Angular-Slickgrid-Demos prod build):
80
- ```js
81
- module.exports = {
82
- packages: {
83
- 'angular-slickgrid': {
84
- ignorableDeepImportMatchers: [
85
- /assign-deep/,
86
- /slickgrid\//,
87
- /flatpickr/,
88
- /dequal/,
89
- ]
90
- },
91
- }
92
- };
93
- ```
94
- You should also add `Angular-Slickgrid` as an allowed CommonJS dependency to your `angular.json` file to silence the warnings.
95
- ```json
96
- "options": {
97
- "allowedCommonJsDependencies": ["angular-slickgrid"]
98
- }
99
- ```
83
+ ### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
84
+ Angular-Slickgrid and Slickgrid-Universal both have **100%** Unit Test Coverage, we are talking about +15,000 lines of code (+3,750 unit tests) that are fully tested with [Jest](https://jestjs.io/). On the UI side, all Angular-Slickgrid Examples are tested with [Cypress](https://www.cypress.io/), there are over +500 Cypress E2E tests.
85
+
86
+ #### How to load data with `HttpClient`?
87
+ You might notice that all demos are coded with mocked dataset in each of the examples, that is mainly for demo purposes, but you might be wondering how to connect this with an `HttpClient`? Easy... just replace the mocked data, assigned to the `dataset` property, by your `HttpClient` call it and that's it. The `dataset` property can be changed or refreshed at any time, which is why you can use local data and/or connect it to a `Promise` or an `Observable` with `HttpClient` (internally it's just a SETTER that refreshes the grid). See [Example 24](https://ghiscoding.github.io/Angular-Slickgrid/#/gridtabs) for a demo showing how to load a JSON file with `HttpClient`.
88
+
89
+ ## Main features
90
+ You can see some screenshots below and the instructions down below and if that is not enough for you to decide, head over to the [Wiki - Main Features](https://github.com/ghiscoding/Angular-Slickgrid/wiki).
91
+
92
+ ## Troubleshooting Section
100
93
 
101
94
  ### Angular 12 with WebPack 5 - how to fix polyfill error
102
95
  Since Angular 12 switched to WebPack 5, you might get some new errors and you will need to add some polyfills manually to get the Excel Builder (Excel Export) to work.
@@ -129,23 +122,58 @@ This is no longer the case. Verify if you need this module and configure a polyf
129
122
  ],
130
123
  ```
131
124
 
132
- ### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
133
- Angular-Slickgrid and Slickgrid-Universal both have **100%** Unit Test Coverage, we are talking about +15,000 lines of code (+3,750 unit tests) that are fully tested with [Jest](https://jestjs.io/). On the UI side, all Angular-Slickgrid Examples are tested with [Cypress](https://www.cypress.io/), there are over +500 Cypress E2E tests.
125
+ ### `ngcc` Build Warnings (Angular >=8.0 && <16.0)
126
+ You might get warnings about SlickGrid while doing a production build, most of them are fine and the best way to fix them, is to simply remove/ignore the warnings to CommonJS packages, all you have to do is to add a file named `ngcc.config.js` in your project root (same location as the `angular.json` file) with the following content (you can also see this [commit](https://github.com/ghiscoding/angular-slickgrid-demos/commit/1fe8092bcd2e99ede5ab048f4a7ebe6254e4bee0) which fixes the Angular-Slickgrid-Demos prod build):
127
+ ```js
128
+ module.exports = {
129
+ packages: {
130
+ 'angular-slickgrid': {
131
+ ignorableDeepImportMatchers: [
132
+ /assign-deep/,
133
+ /slickgrid\//,
134
+ /flatpickr/,
135
+ /dequal/,
136
+ ]
137
+ },
138
+ }
139
+ };
140
+ ```
141
+ You should also add `Angular-Slickgrid` as an allowed CommonJS dependency to your `angular.json` file to silence the warnings.
142
+ ```json
143
+ "options": {
144
+ "allowedCommonJsDependencies": ["angular-slickgrid"]
145
+ }
146
+ ```
134
147
 
135
- #### How to load data with `HttpClient`?
136
- You might notice that all demos are coded with mocked dataset in each of the examples, that is mainly for demo purposes, but you might be wondering how to connect this with an `HttpClient`? Easy... just replace the mocked data, assigned to the `dataset` property, by your `HttpClient` call it and that's it. The `dataset` property can be changed or refreshed at any time, which is why you can use local data and/or connect it to a `Promise` or an `Observable` with `HttpClient` (internally it's just a SETTER that refreshes the grid). See [Example 24](https://ghiscoding.github.io/Angular-Slickgrid/#/gridtabs) for a demo showing how to load a JSON file with `HttpClient`.
148
+ #### `strictTemplates` error
149
+ In Angular 14 and higher, Angular has a `strictTemplates` flag in your `tsconfig.json` file (enabled by default when creating new projects from CLI) which causes issues with Angular-Slickgrid events with errors similar to this:
137
150
 
138
- ## Wiki / Documentation
139
- The Wiki is where all the documentation and instructions will go, so please consult the [Angular-Slickgrid - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki) before opening any issues. The [Wiki - HOWTO](https://github.com/ghiscoding/Angular-Slickgrid/wiki/HOWTO---Step-by-Step) is a great place to start with. You can also take a look at the [Demo page](https://ghiscoding.github.io/Angular-Slickgrid), it includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).
151
+ > Property 'detail' does not exist on type 'Event'. (onAngularGridCreated)="angularGridReady($event.detail)"
140
152
 
141
- ## Main features
142
- You can see some screenshots below and the instructions down below and if that is not enough for you to decide, head over to the [Wiki - Main Features](https://github.com/ghiscoding/Angular-Slickgrid/wiki).
153
+ The reason is because Angular-Slickgrid uses Custom Event for all its events and Angular complains because these Custom Events aren't typed. In order to fix this issue, you have 3 viable approach:
143
154
 
144
- ## Missing features
145
- What if `Angular-Slickgrid` is missing feature(s) compare to the original core library [6pac/SlickGrid](https://github.com/6pac/SlickGrid/)?
155
+ 1. disabled `strictTemplates` in your `tsconfig.json` config
156
+ 2. cast the event in the View template to `$any` type
157
+ - `$any($event)` for example `$any($event).detail.eventData`
158
+ 3. cast the event in the component ViewModel to `CustomEvent`
159
+ ```html
160
+ <angular-slickgrid gridId="grid28"
161
+ [columnDefinitions]="columnDefinitions"
162
+ [gridOptions]="gridOptions"
163
+ [dataset]="dataset"
164
+ (onAngularGridCreated)="angularGridReady($event.detail)">
165
+ </angular-slickgrid>
166
+ ```
146
167
 
147
- Fear not, you can simply reference the `SlickGrid` and `DataView` objects, just like in the core lib (they are exposed through Custom Events). For more info continue reading on [Wiki - SlickGrid & DataView objects](/ghiscoding/Angular-Slickgrid/wiki/SlickGrid-&-DataView-Objects) and [Wiki - Grid & DataView Events](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-&-DataView-Events)
168
+ ```ts
169
+ angularGridReady(event: CustomEvent) {
170
+ this.angularGrid = event.detail as AngularGridInstance;
171
+ this.gridObj = this.angularGrid.slickGrid;
172
+ }
173
+ ```
148
174
 
175
+ The simplest is obviously the option 1 but you lose the strictness on the view templates, more details can found under the discussion [(`strictTemplates`) Template error ](https://github.com/ghiscoding/Angular-Slickgrid/discussions/815), I have also opened a similar Stack Overflow question myself:
176
+ [How to use Custom Event (not Event Emitter) without `strictTemplates` to complain about `$event` not being a Custom Event type?](https://stackoverflow.com/questions/68490848/how-to-use-custom-event-not-event-emitter-without-stricttemplates-to-complai).
149
177
 
150
178
  ## Screenshots
151
179