angular-slickgrid 7.3.1 → 7.4.0

package/README.md

@@ -19,6 +19,8 @@ One of the best JavasSript datagrid [SlickGrid](https://github.com/mleibman/Slic
 ## Documentation
 📕 [Documentation](https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start) website powered by GitBook.
 
+For common issues, see the [Troubleshooting Section](#troubleshooting-section) below
+
 ## Installation
 A good starting point is the **[Docs - Quick Start](https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start)** and/or simply clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. Please review all documentation and closed issues before opening any new issue, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
 
@@ -55,11 +57,6 @@ If you wish to contribute then make sure to follow the steps shown in the [CONTR
 ## Latest News & Releases
 Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/releases) section for all latest News & Releases.
 
-## Troubleshooting / Documentation
-The [Documentation](https://ghiscoding.gitbook.io/angular-slickgrid/) is powered by GitBook and is where you'll find all the documentation, so please consult the [Angular-Slickgrid - Documentation](https://ghiscoding.gitbook.io/angular-slickgrid/) before opening any issues. The [Docs - Quick Start](https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start) 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).
-
-For common issues, see the [Troubleshooting Section](#troubleshooting-section) below
-
 ## Angular Compatibility
 
 > **Note** please be aware that only the latest version of Angular-Slickgrid is supported and will receive bug fixes. The reason older versions are not supported is simply because it's already a lot of work to maintain for a single developer.
@@ -90,132 +87,11 @@ Angular-Slickgrid uses `ngx-translate` library to support Locales, it is also re
 |  8-9            |        12.x         |
 |  7              |        11.x         |
 
-### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
-Angular-Slickgrid and Slickgrid-Universal both have **100%** Unit Test Coverage, that includes over +4,000 unit tests using [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.
-
-#### How to load data with `HttpClient`?
-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 and that's about it. The `dataset` property can be changed or refreshed at any time and it will be reflected in the grid, which is why you can use local data and/or connect it with 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`.
-
-## Main features
-You can see some screenshots below and visit the [Documentation](https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start) website.
+### Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
+Slickgrid-Universal has **100%** Unit Test Coverage and all Slickgrid-React Examples are tested with [Cypress](https://www.cypress.io/) as E2E tests.
 
 ## Troubleshooting Section
 
-### Angular 12 with WebPack 5 - how to fix polyfill error
-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.
-
-#### The error you might get
-
-```text
-BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
-This is no longer the case. Verify if you need this module and configure a polyfill for it.
-```
-
-#### Steps to fix it
-1. `npm install stream-browserify`
-2. Add a path mapping in `tsconfig.json`:
-```
-{
-  ...
-  "compilerOptions": {
-    "paths": {
-      "stream": [ "./node_modules/stream-browserify" ]
-    },
-```
-3. Add `stream` to `allowedCommonJsDependencies` in `angular.json`:
-```
-  "options": {
-    "allowedCommonJsDependencies": [
-      "excel-builder-webpacker",
-      "stream"
-    ],
-```
-
-### `ngcc` Build Warnings (Angular >=8.0 && <16.0)
-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):
-```js
-module.exports = {
-  packages: {
-    'angular-slickgrid': {
-      ignorableDeepImportMatchers: [
-        /assign-deep/,
-        /slickgrid\//,
-        /flatpickr/,
-        /dequal/,
-      ]
-    },
-  }
-};
-```
-You should also add `Angular-Slickgrid` as an allowed CommonJS dependency to your `angular.json` file to silence the warnings.
-```json
-"options": {
-  "allowedCommonJsDependencies": ["angular-slickgrid"]
-}
-```
-
-#### `strictTemplates` error
-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:
-
-> Property 'detail' does not exist on type 'Event'. (onAngularGridCreated)="angularGridReady($event.detail)"
-
-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 approaches:
-
-1. disabled `strictTemplates` in your `tsconfig.json` config
-2. cast the event in the View template to `$any` type
-   - `$any($event)` for example `$any($event).detail.eventData`
-3. cast the event in the component ViewModel to `CustomEvent`
-```html
-<angular-slickgrid gridId="grid28"
-    [columnDefinitions]="columnDefinitions"
-    [gridOptions]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)">
-</angular-slickgrid>
-```
-
-```ts
-angularGridReady(event: CustomEvent) {
-  this.angularGrid = event.detail as AngularGridInstance;
-  this.gridObj = this.angularGrid.slickGrid;
-}
-```
-
-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:
-[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).
-
-## Screenshots
-
-Screenshots from the demo app with the `Bootstrap` theme.
-
-_Note that the styling changed a bit, the best is to simply head over to the [Live Demo](https://ghiscoding.github.io/Angular-Slickgrid) page._
-
-### Slickgrid example with Formatters (last column shown is a custom Formatter)
-
-#### _You can also see the Grid Menu opened (aka hambuger menu)_
-
-![Default Slickgrid Example](/screenshots/formatters.png)
-
-### Filters and Multi-Column Sort
-
-![Filter and Sort](/screenshots/filter_and_sort.png)
-
-### Inline Editing
-
-![Editors](/screenshots/editors.png)
-
-### Pinned (aka frozen) Columns/Rows
-
-![Pinned Columns/Rows](/screenshots/frozen.png)
-
-### Draggable Grouping & Aggregators
-
-![Draggable Grouping](/screenshots/draggable-grouping.png)
-
-### Slickgrid Example with Server Side (Filter/Sort/Pagination)
-#### Comes with OData & GraphQL support (you can implement custom ones too)
-
-![Slickgrid Server Side](/screenshots/pagination.png)
-
-### Composite Editor Modal Windows
-![Composite Editor Modal](/screenshots/composite-editor.png)
+- [Angular 12 with WebPack 5 - how to fix polyfill error](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table#angular-12-with-webpack-5---how-to-fix-polyfill-error)
+- [`ngcc` Build Warnings (Angular >=8.0 && <16.0)](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table#ngcc-build-warnings-angular-80--160)
+- [`strictTemplates` error](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table#stricttemplates-error)

package/app/modules/angular-slickgrid/extensions/slickRowDetailView.d.ts

@@ -16,14 +16,14 @@ export declare class SlickRowDetailView extends UniversalSlickRowDetailView {
     protected readonly appRef: ApplicationRef;
     protected readonly eventPubSubService: EventPubSubService;
     protected readonly gridContainerElement: HTMLDivElement;
-    protected rxjs?: RxJsFacade;
+    protected rxjs?: RxJsFacade | undefined;
     rowDetailContainer: ViewContainerRef;
     protected _preloadComponent: Type<object> | undefined;
     protected _views: CreatedView[];
     protected _viewComponent: Type<object>;
     protected _subscriptions: EventSubscription[];
     protected _userProcessFn: (item: any) => Promise<any> | Observable<any> | Subject<any>;
-    constructor(angularUtilService: AngularUtilService, appRef: ApplicationRef, eventPubSubService: EventPubSubService, gridContainerElement: HTMLDivElement, rxjs?: RxJsFacade);
+    constructor(angularUtilService: AngularUtilService, appRef: ApplicationRef, eventPubSubService: EventPubSubService, gridContainerElement: HTMLDivElement, rxjs?: RxJsFacade | undefined);
     get addonOptions(): import("@slickgrid-universal/common").RowDetailViewOption;
     protected get datasetIdPropName(): string;
     get eventHandler(): SlickEventHandler;