feat(angular): add all event Types to support Strict Templates (#2243)

* feat(angular): add all event Types to support Strict Templates

Author: ghiscoding

frameworks/angular-slickgrid/README.md

@@ -67,10 +67,6 @@ export class GridComponent implements OnInit {
     [dataset]="dataset">
 </angular-slickgrid>
 ```
-### Troubleshooting
-
-> [!WARNING]
-> Because of its use of native Custom Event, this project **does not** work well with `strictTemplates`, so please make sure to either disable `strictTemplates` or cast your event as `any` (see this [discussion](https://github.com/ghiscoding/Angular-Slickgrid/discussions/815) for more info)
 
 ### Styling Themes
 
@@ -143,7 +139,3 @@ Angular-Slickgrid uses [`ngx-translate`](https://github.com/ngx-translate/core)
 
 ### Tested with [Vitest](https://vitest.dev/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
 Slickgrid-Universal & Angular-Slickgrid both have **100%** Unit Test Coverage and also every Angular-Slickgrid Examples are fully tested with [Cypress](https://www.cypress.io/) as E2E tests.
-
-## Troubleshooting Section
-
-- [`strictTemplates` error](https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/troubleshooting#stricttemplates-error)

frameworks/angular-slickgrid/docs/TOC.md

@@ -36,8 +36,8 @@
 
 ## Events
 
-* [Available events](events/Available-Events.md)
-* [On Events](events/Grid-&-DataView-Events.md)
+* [Available events](events/available-events.md)
+* [On Events](events/grid-and-dataview-events.md)
 
 ## Slick Grid/DataView Objects
 * [Slick Grid/DataView Objects](slick-grid-dataview-objects/slickgrid-dataview-objects.md)

frameworks/angular-slickgrid/docs/events/Available-Events.md renamed to frameworks/angular-slickgrid/docs/events/available-events.md

@@ -101,6 +101,12 @@ handleOnHeaderMenuCommand(e) {
   - `onHeaderMenuBeforeMenuShow`
   - `onHeaderMenuAfterMenuShow`
 
+#### Export Services
+  - `onAfterExportToExcel`
+  - `onBeforeExportToExcel`
+  - `onBeforeExportToTextFile`
+  - `onAfterExportToTextFile`
+
 #### Filter Service
    - `onBeforeFilterClear`
    - `onBeforeSearchChange`

frameworks/angular-slickgrid/docs/events/Grid-&-DataView-Events.md renamed to frameworks/angular-slickgrid/docs/events/grid-and-dataview-events.md

@@ -179,33 +179,3 @@ export class MyApp {
   }
 }
 ```
-
-### Error thrown in the IDE when using `strictTemplates`
-You might get some error thrown in your editor by the Angular-Language-Service, the error might 1 of these
-```shell
-Event onAngularGridCreated is not emitted by any applicable directives nor by angular-slickgrid element
-```
-or
-```shell
-error TS2339: Property 'detail' does not exist on type 'Event'.
-```
-There are 3 possible solutions to fix this issue
-1. disabled `strictTemplates`
-2. define argument type as `Event` to avoid error then later cast it as a `CustomEvent`
-```ts
-angularGridReady(event: Event) {
-    this.angularGrid = (event as CustomEvent).detail as AngularGridInstance;
-}
-```
-3. use `$any()` in the View
-```html
-<angular-slickgrid gridId="grid1"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($any($event).detail)">
-</angular-slickgrid>
-```
-You can read more on the subject at:
-- Stack Overflow question [Cannot use onAngularGridCreated emitter](https://stackoverflow.com/questions/71156193/cannot-use-onangulargridcreated-emitter/71245004#71245004)
-- Discussion [#815](https://github.com/ghiscoding/angular-slickgrid/discussions/815)

frameworks/angular-slickgrid/oxlintrc-angular.json

@@ -7,17 +7,7 @@
   },
   "plugins": ["oxc", "regex", "typescript", "vitest"],
   "jsPlugins": ["@angular-eslint/eslint-plugin"],
-  "ignorePatterns": [
-    "**/*.spec.ts",
-    "**/*.cy.ts",
-    ".angular/*",
-    "dist/",
-    "coverage/",
-    "test/",
-    "**/environment.*.ts",
-    "**/grid-remote.component.ts",
-    "**/public_api.ts"
-  ],
+  "ignorePatterns": ["**/*.spec.ts", "**/*.cy.ts", ".angular/*", "dist/", "coverage/", "test/", "**/environment.*.ts", "**/public_api.ts"],
   "overrides": [
     {
       "files": ["**/*.ts"],

frameworks/angular-slickgrid/src/demos/examples/example05.component.ts

@@ -6,6 +6,7 @@ import {
   AngularSlickgridModule,
   Filters,
   OperatorType,
+  PaginationMetadata,
   type AngularGridInstance,
   type Column,
   type GridOption,
@@ -443,7 +444,7 @@ export class Example5Component implements OnInit {
     return true;
   }
 
-  handleOnBeforePaginationChange(_e: Event) {
+  handleOnBeforePaginationChange(_e: CustomEvent<PaginationMetadata>) {
     // e.preventDefault();
     // return false;
     return true;

frameworks/angular-slickgrid/src/demos/examples/example19-rowdetail.component.ts

@@ -4,22 +4,25 @@ import { FormsModule } from '@angular/forms';
 import type { SlickDataView, SlickGrid } from '../../library';
 import type { Example19Component } from './example19.component';
 
+interface ItemDetail {
+  rowId: string;
+  duration: number;
+  percentComplete: number;
+  reporter: string;
+  start: Date;
+  finish: Date;
+  effortDriven: boolean;
+  assignee: string;
+  title: string;
+}
+
 @Component({
   styles: ['.detail-label { display: inline-flex; align-items: center; gap: 4px; padding: 4px; }', 'label { font-weight: 600; }'],
   templateUrl: './example19-rowdetail.component.html',
-  imports: [FormsModule, DecimalPipe, DatePipe],
+  imports: [DatePipe, DecimalPipe, FormsModule],
 })
 export class Example19RowDetailComponent {
-  model!: {
-    duration: Date;
-    percentComplete: number;
-    reporter: string;
-    start: Date;
-    finish: Date;
-    effortDriven: boolean;
-    assignee: string;
-    title: string;
-  };
+  model: ItemDetail = {} as ItemDetail;
 
   // you also have access to the following objects (it must match the exact property names shown below)
   addon: any; // row detail addon instance
@@ -30,15 +33,15 @@ export class Example19RowDetailComponent {
   // NOTE that you MUST provide it through the "parentRef" property in your "rowDetail" grid options
   parentRef!: Example19Component;
 
-  alertAssignee(name: string) {
+  alertAssignee(name?: string) {
     if (typeof name === 'string') {
       alert(`Assignee on this task is: ${name.toUpperCase()}`);
     } else {
       alert('No one is assigned to this task.');
     }
   }
 
-  deleteRow(model: any) {
+  deleteRow(model: ItemDetail) {
     if (confirm(`Are you sure that you want to delete ${model.title}?`)) {
       // you first need to collapse all rows (via the 3rd party addon instance)
       this.addon.collapseAll();
@@ -50,7 +53,7 @@ export class Example19RowDetailComponent {
     }
   }
 
-  callParentMethod(model: any) {
+  callParentMethod(model: ItemDetail) {
     this.parentRef.showFlashMessage(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
   }
 }

frameworks/angular-slickgrid/src/demos/examples/example27.component.html

@@ -132,11 +132,9 @@ <h2>
     (onFilterCleared)="hideSpinner()"
     (onBeforeSortChange)="showSpinner()"
     (onSortChanged)="hideSpinner()"
-    (onBeforeToggleTreeCollapse)="showSpinner()"
-    (onToggle-tree-collapsed)="hideSpinner()"
-    (onTree-full-toggle-start)="showSpinner()"
-    (onTree-full-toggle-end)="handleOnTreeFullToggleEnd($event.detail)"
-    (onTree-item-toggled)="handleOnTreeItemToggled($event.detail)"
+    (onTreeFullToggleStart)="showSpinner()"
+    (onTreeFullToggleEnd)="handleOnTreeFullToggleEnd($event.detail)"
+    (onTreeItemToggled)="handleOnTreeItemToggled($event.detail)"
   >
   </angular-slickgrid>
 </div>

frameworks/angular-slickgrid/src/demos/examples/example30.component.ts

@@ -617,8 +617,8 @@ export class Example30Component implements OnDestroy, OnInit {
     return false;
   }
 
-  handleItemDeleted(itemId: string) {
-    console.log('item deleted with id:', itemId);
+  handleItemDeleted(itemIds: string[]) {
+    console.log('item deleted with ids:', itemIds);
   }
 
   handleOnBeforeEditCell(e: Event, args: any) {

frameworks/angular-slickgrid/src/demos/examples/example32.component.ts

@@ -17,35 +17,11 @@ import {
   type GridOption,
   type LongTextEditorOption,
   type SearchTerm,
-  type SlickGrid,
   type VanillaCalendarOption,
 } from '../../library';
 
 const URL_COUNTRIES_COLLECTION = 'assets/data/countries.json';
 
-/**
- * Check if the current item (cell) is editable or not
- * @param {*} dataContext - item data context object
- * @param {*} columnDef - column definition
- * @param {*} grid - slickgrid grid object
- * @returns {boolean} isEditable
- */
-function checkItemIsEditable(dataContext: any, columnDef: Column, grid: SlickGrid) {
-  const gridOptions = grid && grid.getOptions && grid.getOptions();
-  const hasEditor = columnDef.editor;
-  const isGridEditable = gridOptions.editable;
-  let isEditable = !!(isGridEditable && hasEditor);
-
-  if (dataContext && columnDef && gridOptions && gridOptions.editable) {
-    switch (columnDef.id) {
-      case 'finish':
-        isEditable = !!dataContext?.completed;
-        break;
-    }
-  }
-  return isEditable;
-}
-
 const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, _dataContext, grid) => {
   const gridOptions = grid && grid.getOptions && grid.getOptions();
   const isEditableLine = gridOptions.editable && columnDef.editor;
@@ -607,44 +583,6 @@ export class Example32Component implements OnInit {
     return tmpArray;
   }
 
-  handleValidationError(_e: Event, args: any) {
-    if (args.validationResults) {
-      alert(args.validationResults.msg);
-    }
-    return false;
-  }
-
-  handleItemDeleted(_e: Event, args: any) {
-    console.log('item deleted with id:', args.itemId);
-  }
-
-  handleOnBeforeEditCell(e: Event, args: any) {
-    const { column, item, grid } = args;
-
-    if (column && item) {
-      if (!checkItemIsEditable(item, column, grid)) {
-        e.preventDefault(); // OR eventData.preventDefault();
-        return false;
-      }
-    }
-    return false;
-  }
-
-  handleOnCellChange(_e: Event, args: any) {
-    const dataContext = args?.item;
-
-    // when the field "completed" changes to false, we also need to blank out the "finish" date
-    if (dataContext && !dataContext.completed) {
-      dataContext.finish = null;
-      this.angularGrid.gridService.updateItem(dataContext);
-    }
-  }
-
-  handlePaginationChanged() {
-    this.removeAllUnsavedStylingFromCell();
-    this.renderUnsavedStylingOnAllVisibleCells();
-  }
-
   handleDefaultResizeColumns() {
     // just for demo purposes, set it back to its original width
     const columns = this.angularGrid.slickGrid.getColumns() as Column[];