From 0f2715ab4b82bfb871dc3008961ce47f885bf4cc Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 29 Jan 2026 00:56:44 -0500 Subject: [PATCH 1/6] feat(angular): migrate Angular-Slickgrid to Standalone Component --- .../angular-row-detail-plugin/.oxlintrc.json | 2 +- frameworks/angular-slickgrid/.oxlintrc.json | 2 +- frameworks/angular-slickgrid/docs/TOC.md | 1 + .../docs/column-functionalities/editors.md | 2 +- .../docs/getting-started/quick-start.md | 51 +++++- .../{Global-Options.md => global-options.md} | 29 ++- .../docs/grid-functionalities/row-detail.md | 4 +- .../localization-with-custom-locales.md | 52 +++++- .../localization-with-ngx-translate.md | 78 +++++++- .../src/demos/app-routing.module.ts | 166 ++++++------------ .../{app.module.ts => app.initializer.ts} | 0 .../src/demos/examples/example01.component.ts | 4 +- .../src/demos/examples/example02.component.ts | 11 +- .../src/demos/examples/example03.component.ts | 4 +- .../src/demos/examples/example04.component.ts | 4 +- .../src/demos/examples/example05.component.ts | 4 +- .../src/demos/examples/example06.component.ts | 4 +- .../src/demos/examples/example07.component.ts | 4 +- .../src/demos/examples/example08.component.ts | 10 +- .../src/demos/examples/example09.component.ts | 4 +- .../src/demos/examples/example10.component.ts | 4 +- .../src/demos/examples/example11.component.ts | 4 +- .../src/demos/examples/example12.component.ts | 4 +- .../src/demos/examples/example13.component.ts | 4 +- .../src/demos/examples/example14.component.ts | 4 +- .../src/demos/examples/example15.component.ts | 4 +- .../src/demos/examples/example16.component.ts | 4 +- .../src/demos/examples/example17.component.ts | 4 +- .../src/demos/examples/example18.component.ts | 4 +- .../src/demos/examples/example19.component.ts | 4 +- .../src/demos/examples/example20.component.ts | 4 +- .../src/demos/examples/example21.component.ts | 4 +- .../src/demos/examples/example22.component.ts | 4 +- .../src/demos/examples/example23.component.ts | 4 +- .../src/demos/examples/example24.component.ts | 4 +- .../src/demos/examples/example25.component.ts | 4 +- .../src/demos/examples/example26.component.ts | 4 +- .../src/demos/examples/example27.component.ts | 4 +- .../src/demos/examples/example28.component.ts | 4 +- .../src/demos/examples/example29.component.ts | 4 +- .../src/demos/examples/example30.component.ts | 4 +- .../src/demos/examples/example32.component.ts | 4 +- .../src/demos/examples/example33.component.ts | 4 +- .../src/demos/examples/example34.component.ts | 4 +- .../src/demos/examples/example35.component.ts | 4 +- .../src/demos/examples/example36.component.ts | 4 +- .../src/demos/examples/example37.component.ts | 4 +- .../src/demos/examples/example38.component.ts | 4 +- .../src/demos/examples/example39.component.ts | 4 +- .../src/demos/examples/example40.component.ts | 4 +- .../src/demos/examples/example41.component.ts | 4 +- .../src/demos/examples/example42.component.ts | 4 +- .../src/demos/examples/example43.component.ts | 11 +- .../src/demos/examples/example44.component.ts | 4 +- .../examples/example45-detail.component.ts | 4 +- .../src/demos/examples/example45.component.ts | 4 +- .../src/demos/examples/example46.component.ts | 4 +- .../src/demos/examples/example47.component.ts | 4 +- .../src/demos/examples/example48.component.ts | 4 +- .../src/demos/examples/example49.component.ts | 4 +- .../src/demos/examples/example50.component.ts | 4 +- .../examples/swt-common-grid.component.ts | 5 +- .../components/angular-slickgrid.component.ts | 13 +- .../angular-slickgrid/src/library/index.ts | 1 - .../modules/angular-slickgrid.module.spec.ts | 24 --- .../modules/angular-slickgrid.module.ts | 26 --- .../src/library/services/container.service.ts | 4 +- frameworks/angular-slickgrid/src/main.ts | 40 ++--- 68 files changed, 406 insertions(+), 314 deletions(-) rename frameworks/angular-slickgrid/docs/grid-functionalities/{Global-Options.md => global-options.md} (55%) rename frameworks/angular-slickgrid/src/demos/{app.module.ts => app.initializer.ts} (100%) delete mode 100644 frameworks/angular-slickgrid/src/library/modules/angular-slickgrid.module.spec.ts delete mode 100644 frameworks/angular-slickgrid/src/library/modules/angular-slickgrid.module.ts diff --git a/frameworks-plugins/angular-row-detail-plugin/.oxlintrc.json b/frameworks-plugins/angular-row-detail-plugin/.oxlintrc.json index 0ee40e517b..4beeadc11e 100644 --- a/frameworks-plugins/angular-row-detail-plugin/.oxlintrc.json +++ b/frameworks-plugins/angular-row-detail-plugin/.oxlintrc.json @@ -26,7 +26,7 @@ "style": "kebab-case" } ], - "@angular-eslint/prefer-standalone": "off", + "@angular-eslint/prefer-standalone": "error", "typescript/no-unused-expressions": "off", "typescript/no-unused-vars": [ "error", diff --git a/frameworks/angular-slickgrid/.oxlintrc.json b/frameworks/angular-slickgrid/.oxlintrc.json index 80033b8200..6bb03bf0d6 100644 --- a/frameworks/angular-slickgrid/.oxlintrc.json +++ b/frameworks/angular-slickgrid/.oxlintrc.json @@ -26,7 +26,7 @@ "style": "kebab-case" } ], - "@angular-eslint/prefer-standalone": "off", + "@angular-eslint/prefer-standalone": "error", "typescript/no-unused-expressions": "off", "typescript/no-unused-vars": [ "error", diff --git a/frameworks/angular-slickgrid/docs/TOC.md b/frameworks/angular-slickgrid/docs/TOC.md index 5ec08f3089..506624ac9d 100644 --- a/frameworks/angular-slickgrid/docs/TOC.md +++ b/frameworks/angular-slickgrid/docs/TOC.md @@ -59,6 +59,7 @@ * [Export to Excel](grid-functionalities/Export-to-Excel.md) * [Export to PDF](grid-functionalities/Export-to-PDF.md) * [Export to File (csv/txt)](grid-functionalities/Export-to-Text-File.md) +* [Load Global Grid Options](grid-functionalities/global-options.md) * [Grid Menu](grid-functionalities/grid-menu.md) * [Grid State & Presets](grid-functionalities/grid-state-preset.md) * [Grouping & Aggregators](grid-functionalities/grouping-and-aggregators.md) diff --git a/frameworks/angular-slickgrid/docs/column-functionalities/editors.md b/frameworks/angular-slickgrid/docs/column-functionalities/editors.md index 311d27453d..5ab1f98c16 100644 --- a/frameworks/angular-slickgrid/docs/column-functionalities/editors.md +++ b/frameworks/angular-slickgrid/docs/column-functionalities/editors.md @@ -244,7 +244,7 @@ this.columnDefinitions = [ ``` #### Default Sanitize-Html Options -If you find that the HTML that you passed is being sanitized and you wish to change it, then you can change the default `sanitizeHtmlOptions` property defined in the Global Grid Options, for more info on how to change these global options, see the [Wiki - Global Grid Options](../grid-functionalities/Global-Options.md). The current defaults are: +If you find that the HTML that you passed is being sanitized and you wish to change it, then you can change the default `sanitizeHtmlOptions` property defined in the Global Grid Options, for more info on how to change these global options, see the [Wiki - Global Grid Options](../grid-functionalities/global-options.md). The current defaults are: ```typescript sanitizeHtmlOptions: { diff --git a/frameworks/angular-slickgrid/docs/getting-started/quick-start.md b/frameworks/angular-slickgrid/docs/getting-started/quick-start.md index 96b1bf4c0d..ae294a7336 100644 --- a/frameworks/angular-slickgrid/docs/getting-started/quick-start.md +++ b/frameworks/angular-slickgrid/docs/getting-started/quick-start.md @@ -68,7 +68,7 @@ You could also compile the SASS files with your own customization, for that simp ); ``` -### 4. Include it in your App Module (or App Config for Standalone) +### 4. for `Angular-Slickgrid` <= 9.0 - Include it in your App Module (or App Config for Standalone) Below are 2 different setups (with App Module (legacy) or Standalone) but in both cases the `AngularSlickgridModule.forRoot()` is **required**, so make sure to include it. Also note that the GitHub demo is strictly built with an App Module which is considered the legacy approach. #### App Module (legacy) @@ -135,7 +135,40 @@ The new updated version of `ng-packagr` use strict metadata and you might get er }) ``` -### 5. Install/Setup `ngx-translate` for Localization (optional) +### 5. for `Angular-Slickgrid` >= 10.x - Standalone Component + +```ts +import { AngularSlickgridComponent, GridOption } from 'angular-slickgrid'; + +// optional Grid Option +const gridOptionConfig: GridOption = { + enableAutoResize: true, + autoResize: { + container: '#demo-container', + rightPadding: 10, + }, + sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml, { ADD_ATTR: ['level'], RETURN_TRUSTED_TYPE: true }), +}; + +bootstrapApplication(AppComponent, { + providers: [ + AngularSlickgridComponent, + { provide: 'defaultGridOption', useValue: gridOptionConfig }, + provideAppInitializer(() => { + const initializerFn = appInitializerFactory(inject(TranslateService), inject(Injector)); + return initializerFn(); + }), + provideTranslateService({ + fallbackLang: 'en', + loader: provideTranslateHttpLoader({ prefix: './assets/i18n/', suffix: '.json' }), + }), + provideHttpClient(withInterceptorsFromDi()), + provideZoneChangeDetection(), + ], +}).catch((err) => console.log(err)); +``` + +### 6. Install/Setup `ngx-translate` for Localization (optional) #### If you don't want to use any Translate Service and use only 1 Locale then take a look at this [demo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap4-demo-with-locales) To provide locales other than English (default locale), you have 2 options that you can go with. If you only use English, there is nothing to do (you can still change some of the texts in the grid via option 1.) 1. Using [Custom Locale](../localization/localization-with-custom-locales.md), that is when you use **only 1** locale (other than English)... this is a new feature starting from version `2.10.0` and up. @@ -153,7 +186,7 @@ Also note that every time you want to use a translation key, you simply have to | columnGroup | columnGroupKey | | optionTitle | optionTitleKey | -### 6. Create a basic grid +### 7. Create a basic grid And finally, you are now ready to use it in your project, for example let's create both html/ts files for a `grid-basic.component` example, configure the Column Definitions, Grid Options and pass a Dataset to the grid: ```ts import { Column, GridOption } from 'angular-slickgrid'; @@ -201,7 +234,7 @@ define Angular-Slickgrid in your View ``` -### 7. Explore the Documentation +### 8. Explore the Documentation The last step is really to explore all the pages that are available in the documentation, everything you need to use the library should be available in here and so you should visit it often. For example a good starter is to look at the following - for all the `Grid Options`, take a look at all the [Grid Options](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/gridOption.interface.ts) interface. @@ -211,10 +244,10 @@ The last step is really to explore all the pages that are available in the docum - [Grid Menu](../grid-functionalities/Grid-Menu.md) ... and much more, just explore the Documentation through all the available pages. -### 8. How to load data with `HttpClient`? +### 9. How to load data with `HttpClient`? You might notice that all demos are made with mocked dataset that are embedded in each 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 it. The `dataset` property can be changed 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-demos/#/gridtabs) for a demo showing how to load a JSON file with `HttpClient`. -### 9. Live Demo - Clone the Examples +### 10. Live Demo - Clone the Examples The best way to get started is to clone the [Angular-Slickgrid-demos](https://github.com/ghiscoding/angular-slickgrid-demos), it has multiple examples and it is also updated frequently since it is used for the GitHub Bootstrap 5 demo page. `Angular-Slickgrid` has 3 `Bootstrap` repos, you can see a demo of each ones below. - [Bootstrap 5 demo](https://ghiscoding.github.io/angular-slickgrid-bs5-demo) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-translate) (using `ngx-translate`) - [Bootstrap 5 - examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-locales) (single Locale, without using `ngx-translate`) @@ -222,11 +255,11 @@ The best way to get started is to clone the [Angular-Slickgrid-demos](https://gi ##### All Live Demo Examples have links to the actual code If you would like to see the code to a particular Example, just click on the "see code" which is available in all live examples. -### 10. CSP Compliance +### 11. CSP Compliance The project supports Content Security Policy (CSP) as long as you provide an optional `sanitizer` in your grid options (we recommend DOMPurify). Review the [CSP Compliance](../developer-guides/csp-compliance.md) documentation for more info. -### 11. Missing Features compared to SlickGrid? +### 12. Missing Features compared to SlickGrid? What if `Angular-Slickgrid` is missing feature(s) versus the original `SlickGrid`? Fear not and just use the `SlickGrid` and `DataView` objects directly, which are expose from the start through Custom Events. For more info continue reading on [Docs - SlickGrid & DataView objects](../slick-grid-dataview-objects/SlickGrid-&-DataView-Objects.md) -### 12. Troubleshooting - Build Errors/Warnings +### 13. Troubleshooting - Build Errors/Warnings Visit the [Troubleshooting](./troubleshooting.md) section for more common errors. \ No newline at end of file diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/Global-Options.md b/frameworks/angular-slickgrid/docs/grid-functionalities/global-options.md similarity index 55% rename from frameworks/angular-slickgrid/docs/grid-functionalities/Global-Options.md rename to frameworks/angular-slickgrid/docs/grid-functionalities/global-options.md index 382d1419a1..22e1e1d293 100644 --- a/frameworks/angular-slickgrid/docs/grid-functionalities/Global-Options.md +++ b/frameworks/angular-slickgrid/docs/grid-functionalities/global-options.md @@ -1,5 +1,6 @@ You might find yourself re-using the same configurations over and over, in that case we got you covered. You can change any of the global options directly in your App Module through `forRoot` which accept an optional object of Grid Options. +### 1. for `Angular-Slickgrid` <= 9.0 - Include it in your App Module (or App Config for Standalone) ```typescript import { AngularSlickgridModule } from 'angular-slickgrid'; @@ -17,6 +18,7 @@ import { AngularSlickgridModule } from 'angular-slickgrid'; enablePagination: true, enableSelection: true, enableTranslate: true, + sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml, { ADD_ATTR: ['level'], RETURN_TRUSTED_TYPE: true }), //... }), ], @@ -25,5 +27,30 @@ import { AngularSlickgridModule } from 'angular-slickgrid'; export class AppModule { } ``` + +### 2. for `Angular-Slickgrid` >= 10.x - Standalone Component + +```typescript +import { AngularSlickgridComponent, GridOption } from 'angular-slickgrid'; + +// optional Grid Option +const gridOptionConfig: GridOption = { + enableAutoResize: true, + autoResize: { + container: '#demo-container', + rightPadding: 10, + }, + sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml, { ADD_ATTR: ['level'], RETURN_TRUSTED_TYPE: true }), +}; + +bootstrapApplication(AppComponent, { + providers: [ + AngularSlickgridComponent, + { provide: 'defaultGridOption', useValue: gridOptionConfig }, + // .... + ], +}).catch((err) => console.log(err)); +``` + ### List of Global Options -For the complete list of available Grid Option, you can take a look at the [Default Grid Options](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/app/angular-slickgrid/global-grid-options.ts) file and/or technically any of the options from the [grid options - interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/app/angular-slickgrid/models/gridOption.interface.ts) are configurable. \ No newline at end of file +For the complete list of available Grid Option, you can take a look at the [Default Grid Options](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/app/angular-slickgrid/global-grid-options.ts) file and/or technically any of the options from the [grid options - interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/library/models/gridOption.interface.ts) are configurable. \ No newline at end of file diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md b/frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md index d42235e7d6..419d2cc8ae 100644 --- a/frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md +++ b/frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md @@ -183,7 +183,7 @@ Same concept as the preload, we pass an Angular Component to the `viewComponent` // ... row detail options // View Component to load when row detail data is ready - // also make sure that it's part of your App Module `entryComponents` array + // also make sure that it's part of your App Module `entryComponents` array (for `angular-slickgrid` < 10) viewComponent: RowDetailViewComponent, } }; @@ -246,7 +246,7 @@ export class RowDetailViewComponent { } } ``` -###### App Module +###### App Module (for `angular-slickgrid` < 10) Also make sure that it's part of your App Module `entryComponents` array since this will be a dynamically created component. ```ts diff --git a/frameworks/angular-slickgrid/docs/localization/localization-with-custom-locales.md b/frameworks/angular-slickgrid/docs/localization/localization-with-custom-locales.md index d21e05c785..e36934b33e 100644 --- a/frameworks/angular-slickgrid/docs/localization/localization-with-custom-locales.md +++ b/frameworks/angular-slickgrid/docs/localization/localization-with-custom-locales.md @@ -26,7 +26,7 @@ export const localeFrench = { // ... the rest of the text ``` -#### 2. Use the Custom Locales +#### 2. for `Angular-Slickgrid` <= 9.0 - Use the Custom Locales ##### Through the `forRoot()` (globally) This will literally configure Custom Locales for the entire project, so if you want to do it once, that is the place to do it. ```ts @@ -42,6 +42,54 @@ This will literally configure Custom Locales for the entire project, so if you w ] }); ``` + +##### Through the Grid Option of any grid +You can alternatively provide Custom Locales through any grid declaration through the `locales` Grid Options (it's the same as the global one, except that it's per grid) + +```ts +import { localeFrench } from 'locales/fr'; + +export class MyGridComponent { + prepareGrid() { + this.columnDefinitions = [ /* ... */ ]; + + this.gridOptions = { + enableAutoResize: true, + + // provide Custom Locale to this grid only + locales: localeFrench + }; + } +} +``` + +### 3. for `Angular-Slickgrid` >= 10.x - Use the Custom Locales + +##### in your `main.ts` App boostrap + +This will literally configure Custom Locales for the entire project, so if you want to do it once, that is the place to do it. + +```ts +import { AngularSlickgridComponent, GridOption } from 'angular-slickgrid'; + +// optional Grid Option +const gridOptionConfig: GridOption = { + // add any Global Grid Options/Config you might want + // ... + + // Provide a custom locales set + locales: localeFrench, +}; + +bootstrapApplication(AppComponent, { + providers: [ + AngularSlickgridComponent, + { provide: 'defaultGridOption', useValue: gridOptionConfig }, + // ... + ], +}).catch((err) => console.log(err)); +``` + ##### Through the Grid Option of any grid You can alternatively provide Custom Locales through any grid declaration through the `locales` Grid Options (it's the same as the global one, except that it's per grid) @@ -62,5 +110,5 @@ export class MyGridComponent { } ``` -#### 3. Use the lib (without ngx-translate) +#### 4. Use the lib (without ngx-translate) There's nothing else to do, just use the library without defining or providing TranslateService and you're good to go. Read through the Wiki of the [Quick Start](../getting-started/quick-start.md) for basic grid samples. \ No newline at end of file diff --git a/frameworks/angular-slickgrid/docs/localization/localization-with-ngx-translate.md b/frameworks/angular-slickgrid/docs/localization/localization-with-ngx-translate.md index e15939fcd7..92b900efd2 100644 --- a/frameworks/angular-slickgrid/docs/localization/localization-with-ngx-translate.md +++ b/frameworks/angular-slickgrid/docs/localization/localization-with-ngx-translate.md @@ -22,7 +22,9 @@ In order to use `ngx-translate`, you will have to use `@ngx-translate/core` and | 8-9 | 12.x | | 7 | 11.x | -### Minimal installation (~even if you are not using any other locales~) +### 1. for `Angular-Slickgrid` <= 9.0 + +#### Minimal installation (~even if you are not using any other locales~) If you use only 1 locale, you can now disregard `ngx-translate` installation completely, head over to the new [Wiki - Providing Custom Locale](localization-with-custom-locales.md) for more details. But if you still wish to install the minimum installation to get `ngx-translate` then continue reading. ##### Install NPM package @@ -144,7 +146,79 @@ The new updated version of `ng-packagr` use strict metadata and you might get er }) ``` -#### Locales +### 2. for `Angular-Slickgrid` >= 10.0 + +#### App Initializer +The App initializer is useful to fetch all translactions locales asynchronously before any of the component loads. This step is important if you need to fetch translations from JSON assets in an asynchronous step before any other component loads. + +You can move the App Initializer to a separate file or simply add it to your `main.ts` + +```ts +// app-initializer.ts +import { LOCATION_INITIALIZED } from '@angular/common'; +import { type Injector } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; + +// use an Initializer Factory as describe here: https://github.com/ngx-translate/core/issues/517#issuecomment-299637956 +export function appInitializerFactory(translate: TranslateService, injector: Injector) { + return () => + new Promise((resolve: any) => { + const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null)); + locationInitialized.then(() => { + const langToSet = 'en'; + translate.setFallbackLang('en'); + translate.use(langToSet).subscribe({ + next: () => { + // console.info(`Successfully initialized '${langToSet}' language.'`); + }, + error: () => console.error(`Problem with '${langToSet}' language initialization.'`), + complete: () => resolve(null), + }); + }); + }); +} +``` + +then use it in your App `main.ts` + +```ts +// main.ts +import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; +import { enableProdMode, importProvidersFrom, inject, Injector, provideAppInitializer, provideZoneChangeDetection } from '@angular/core'; +import { provideTranslateService, TranslateService } from '@ngx-translate/core'; +import { provideTranslateHttpLoader } from '@ngx-translate/http-loader'; +import { AppComponent } from './demos/app.component'; +import { appInitializerFactory } from './demos/app.initializer'; +import { AngularSlickgridComponent, GridOption } from 'angular-slickgrid'; + +// define Angular-Slickgrid default grid options that are common to all grids +const gridOptionConfig: GridOption = { + enableAutoResize: true, + // ... +}; + +bootstrapApplication(AppComponent, { + providers: [ + AngularSlickgridComponent, + { provide: 'defaultGridOption', useValue: gridOptionConfig }, + + // load your App Initializer to pre-fetch your translations + provideAppInitializer(() => { + const initializerFn = appInitializerFactory(inject(TranslateService), inject(Injector)); + return initializerFn(); + }), + + // configure ngx-translate + provideTranslateService({ + fallbackLang: 'en', + loader: provideTranslateHttpLoader({ prefix: './assets/i18n/', suffix: '.json' }), + }), + provideHttpClient(withInterceptorsFromDi()), + ], +}).catch((err) => console.log(err)); +``` + +### 3. Locales The final step is that you need the actual translations. Note that `ngx-translate` does not support multiple files, with that in mind see below for the following options that you have. diff --git a/frameworks/angular-slickgrid/src/demos/app-routing.module.ts b/frameworks/angular-slickgrid/src/demos/app-routing.module.ts index 312ef50bbc..817be2f5b4 100644 --- a/frameworks/angular-slickgrid/src/demos/app-routing.module.ts +++ b/frameworks/angular-slickgrid/src/demos/app-routing.module.ts @@ -1,117 +1,57 @@ -import { NgModule } from '@angular/core'; -import { provideRouter, RouterModule, type Routes } from '@angular/router'; -import { TranslateModule } from '@ngx-translate/core'; -import { Example1Component } from './examples/example01.component'; -import { Example2Component } from './examples/example02.component'; -import { Example3Component } from './examples/example03.component'; -import { Example4Component } from './examples/example04.component'; -import { Example5Component } from './examples/example05.component'; -import { Example6Component } from './examples/example06.component'; -import { Example7Component } from './examples/example07.component'; -import { Example8Component } from './examples/example08.component'; -import { Example9Component } from './examples/example09.component'; -import { Example10Component } from './examples/example10.component'; -import { Example11Component } from './examples/example11.component'; -import { Example12Component } from './examples/example12.component'; -import { Example13Component } from './examples/example13.component'; -import { Example14Component } from './examples/example14.component'; -import { Example15Component } from './examples/example15.component'; -import { Example16Component } from './examples/example16.component'; -import { Example17Component } from './examples/example17.component'; -import { Example18Component } from './examples/example18.component'; -import { Example19Component } from './examples/example19.component'; -import { Example20Component } from './examples/example20.component'; -import { Example21Component } from './examples/example21.component'; -import { Example22Component } from './examples/example22.component'; -import { Example23Component } from './examples/example23.component'; -import { Example24Component } from './examples/example24.component'; -import { Example25Component } from './examples/example25.component'; -import { Example26Component } from './examples/example26.component'; -import { Example27Component } from './examples/example27.component'; -import { Example28Component } from './examples/example28.component'; -import { Example29Component } from './examples/example29.component'; -import { Example30Component } from './examples/example30.component'; -import { Example32Component } from './examples/example32.component'; -import { Example33Component } from './examples/example33.component'; -import { Example34Component } from './examples/example34.component'; -import { Example35Component } from './examples/example35.component'; -import { Example36Component } from './examples/example36.component'; -import { Example37Component } from './examples/example37.component'; -import { Example38Component } from './examples/example38.component'; -import { Example39Component } from './examples/example39.component'; -import { Example40Component } from './examples/example40.component'; -import { Example41Component } from './examples/example41.component'; -import { Example42Component } from './examples/example42.component'; -import { Example43Component } from './examples/example43.component'; -import { Example44Component } from './examples/example44.component'; -import { Example45Component } from './examples/example45.component'; -import { Example46Component } from './examples/example46.component'; -import { Example47Component } from './examples/example47.component'; -import { Example48Component } from './examples/example48.component'; -import { Example49Component } from './examples/example49.component'; -import { Example50Component } from './examples/example50.component'; -import { HomeComponent } from './examples/home.component'; -import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component'; +import { type Routes } from '@angular/router'; -const routes: Routes = [ - { path: 'home', component: HomeComponent }, - { path: 'example01', component: Example1Component }, - { path: 'example02', component: Example2Component }, - { path: 'example03', component: Example3Component }, - { path: 'example04', component: Example4Component }, - { path: 'example05', component: Example5Component }, - { path: 'example06', component: Example6Component }, - { path: 'example07', component: Example7Component }, - { path: 'example08', component: Example8Component }, - { path: 'example09', component: Example9Component }, - { path: 'example10', component: Example10Component }, - { path: 'example11', component: Example11Component }, - { path: 'example12', component: Example12Component }, - { path: 'example13', component: Example13Component }, - { path: 'example14', component: Example14Component }, - { path: 'example15', component: Example15Component }, - { path: 'example16', component: Example16Component }, - { path: 'example17', component: Example17Component }, - { path: 'example18', component: Example18Component }, - { path: 'example19', component: Example19Component }, - { path: 'example20', component: Example20Component }, - { path: 'example21', component: Example21Component }, - { path: 'example22', component: Example22Component }, - { path: 'example23', component: Example23Component }, - { path: 'example24', component: Example24Component }, - { path: 'example25', component: Example25Component }, - { path: 'example26', component: Example26Component }, - { path: 'example27', component: Example27Component }, - { path: 'example28', component: Example28Component }, - { path: 'example29', component: Example29Component }, - { path: 'example30', component: Example30Component }, - { path: 'example31', component: SwtCommonGridTestComponent }, - { path: 'example32', component: Example32Component }, - { path: 'example33', component: Example33Component }, - { path: 'example34', component: Example34Component }, - { path: 'example35', component: Example35Component }, - { path: 'example36', component: Example36Component }, - { path: 'example37', component: Example37Component }, - { path: 'example38', component: Example38Component }, - { path: 'example39', component: Example39Component }, - { path: 'example40', component: Example40Component }, - { path: 'example41', component: Example41Component }, - { path: 'example42', component: Example42Component }, - { path: 'example43', component: Example43Component }, - { path: 'example44', component: Example44Component }, - { path: 'example45', component: Example45Component }, - { path: 'example46', component: Example46Component }, - { path: 'example47', component: Example47Component }, - { path: 'example48', component: Example48Component }, - { path: 'example49', component: Example49Component }, - { path: 'example50', component: Example50Component }, +export const routes: Routes = [ + { path: 'home', loadComponent: () => import('./examples/home.component').then((m) => m.HomeComponent) }, + { path: 'example01', loadComponent: () => import('./examples/example01.component').then((m) => m.Example1Component) }, + { path: 'example02', loadComponent: () => import('./examples/example02.component').then((m) => m.Example2Component) }, + { path: 'example03', loadComponent: () => import('./examples/example03.component').then((m) => m.Example3Component) }, + { path: 'example04', loadComponent: () => import('./examples/example04.component').then((m) => m.Example4Component) }, + { path: 'example05', loadComponent: () => import('./examples/example05.component').then((m) => m.Example5Component) }, + { path: 'example06', loadComponent: () => import('./examples/example06.component').then((m) => m.Example6Component) }, + { path: 'example07', loadComponent: () => import('./examples/example07.component').then((m) => m.Example7Component) }, + { path: 'example08', loadComponent: () => import('./examples/example08.component').then((m) => m.Example8Component) }, + { path: 'example09', loadComponent: () => import('./examples/example09.component').then((m) => m.Example9Component) }, + { path: 'example10', loadComponent: () => import('./examples/example10.component').then((m) => m.Example10Component) }, + { path: 'example11', loadComponent: () => import('./examples/example11.component').then((m) => m.Example11Component) }, + { path: 'example12', loadComponent: () => import('./examples/example12.component').then((m) => m.Example12Component) }, + { path: 'example13', loadComponent: () => import('./examples/example13.component').then((m) => m.Example13Component) }, + { path: 'example14', loadComponent: () => import('./examples/example14.component').then((m) => m.Example14Component) }, + { path: 'example15', loadComponent: () => import('./examples/example15.component').then((m) => m.Example15Component) }, + { path: 'example16', loadComponent: () => import('./examples/example16.component').then((m) => m.Example16Component) }, + { path: 'example17', loadComponent: () => import('./examples/example17.component').then((m) => m.Example17Component) }, + { path: 'example18', loadComponent: () => import('./examples/example18.component').then((m) => m.Example18Component) }, + { path: 'example19', loadComponent: () => import('./examples/example19.component').then((m) => m.Example19Component) }, + { path: 'example20', loadComponent: () => import('./examples/example20.component').then((m) => m.Example20Component) }, + { path: 'example21', loadComponent: () => import('./examples/example21.component').then((m) => m.Example21Component) }, + { path: 'example22', loadComponent: () => import('./examples/example22.component').then((m) => m.Example22Component) }, + { path: 'example23', loadComponent: () => import('./examples/example23.component').then((m) => m.Example23Component) }, + { path: 'example24', loadComponent: () => import('./examples/example24.component').then((m) => m.Example24Component) }, + { path: 'example25', loadComponent: () => import('./examples/example25.component').then((m) => m.Example25Component) }, + { path: 'example26', loadComponent: () => import('./examples/example26.component').then((m) => m.Example26Component) }, + { path: 'example27', loadComponent: () => import('./examples/example27.component').then((m) => m.Example27Component) }, + { path: 'example28', loadComponent: () => import('./examples/example28.component').then((m) => m.Example28Component) }, + { path: 'example29', loadComponent: () => import('./examples/example29.component').then((m) => m.Example29Component) }, + { path: 'example30', loadComponent: () => import('./examples/example30.component').then((m) => m.Example30Component) }, + { path: 'example31', loadComponent: () => import('./examples/swt-common-grid-test.component').then((m) => m.SwtCommonGridTestComponent) }, + { path: 'example32', loadComponent: () => import('./examples/example32.component').then((m) => m.Example32Component) }, + { path: 'example33', loadComponent: () => import('./examples/example33.component').then((m) => m.Example33Component) }, + { path: 'example34', loadComponent: () => import('./examples/example34.component').then((m) => m.Example34Component) }, + { path: 'example35', loadComponent: () => import('./examples/example35.component').then((m) => m.Example35Component) }, + { path: 'example36', loadComponent: () => import('./examples/example36.component').then((m) => m.Example36Component) }, + { path: 'example37', loadComponent: () => import('./examples/example37.component').then((m) => m.Example37Component) }, + { path: 'example38', loadComponent: () => import('./examples/example38.component').then((m) => m.Example38Component) }, + { path: 'example39', loadComponent: () => import('./examples/example39.component').then((m) => m.Example39Component) }, + { path: 'example40', loadComponent: () => import('./examples/example40.component').then((m) => m.Example40Component) }, + { path: 'example41', loadComponent: () => import('./examples/example41.component').then((m) => m.Example41Component) }, + { path: 'example42', loadComponent: () => import('./examples/example42.component').then((m) => m.Example42Component) }, + { path: 'example43', loadComponent: () => import('./examples/example43.component').then((m) => m.Example43Component) }, + { path: 'example44', loadComponent: () => import('./examples/example44.component').then((m) => m.Example44Component) }, + { path: 'example45', loadComponent: () => import('./examples/example45.component').then((m) => m.Example45Component) }, + { path: 'example46', loadComponent: () => import('./examples/example46.component').then((m) => m.Example46Component) }, + { path: 'example47', loadComponent: () => import('./examples/example47.component').then((m) => m.Example47Component) }, + { path: 'example48', loadComponent: () => import('./examples/example48.component').then((m) => m.Example48Component) }, + { path: 'example49', loadComponent: () => import('./examples/example49.component').then((m) => m.Example49Component) }, + { path: 'example50', loadComponent: () => import('./examples/example50.component').then((m) => m.Example50Component) }, { path: '', redirectTo: '/example34', pathMatch: 'full' }, { path: '**', redirectTo: '/example34', pathMatch: 'full' }, ]; - -@NgModule({ - imports: [RouterModule.forRoot(routes, { useHash: true }), TranslateModule], - exports: [RouterModule, TranslateModule], - providers: [provideRouter(routes)], -}) -export class AppRoutingRoutingModule {} diff --git a/frameworks/angular-slickgrid/src/demos/app.module.ts b/frameworks/angular-slickgrid/src/demos/app.initializer.ts similarity index 100% rename from frameworks/angular-slickgrid/src/demos/app.module.ts rename to frameworks/angular-slickgrid/src/demos/app.initializer.ts diff --git a/frameworks/angular-slickgrid/src/demos/examples/example01.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example01.component.ts index 1244ecb268..ced9d7add0 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example01.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example01.component.ts @@ -1,12 +1,12 @@ import { Component, type OnDestroy, type OnInit } from '@angular/core'; -import { AngularSlickgridModule, Formatters, type AngularGridInstance, type Column, type GridOption } from '../../library'; +import { AngularSlickgridComponent, Formatters, type AngularGridInstance, type Column, type GridOption } from '../../library'; import { zeroPadding } from './utilities'; const NB_ITEMS = 995; @Component({ templateUrl: './example01.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example1Component implements OnDestroy, OnInit { private _darkModeGrid1 = false; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example02.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example02.component.ts index 2de831974e..b97686af07 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example02.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example02.component.ts @@ -1,5 +1,12 @@ import { Component, type OnInit } from '@angular/core'; -import { AngularSlickgridModule, Formatters, type AngularGridInstance, type Column, type Formatter, type GridOption } from '../../library'; +import { + AngularSlickgridComponent, + Formatters, + type AngularGridInstance, + type Column, + type Formatter, + type GridOption, +} from '../../library'; interface DataItem { id: number; @@ -32,7 +39,7 @@ const customEnableButtonFormatter: Formatter = (_row: number, _cell: n @Component({ templateUrl: './example02.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example2Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example03.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example03.component.ts index 178cd5057a..70943907ba 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example03.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example03.component.ts @@ -4,7 +4,7 @@ import { Component, type OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { Subject } from 'rxjs'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Filters, Formatters, @@ -63,7 +63,7 @@ const taskFormatter: Formatter = (_row, _cell, value) => { }; @Component({ templateUrl: './example03.component.html', - imports: [AngularSlickgridModule, JsonPipe], + imports: [AngularSlickgridComponent, JsonPipe], }) export class Example3Component implements OnInit { private _commandQueue: any = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example04.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example04.component.ts index feee961479..985206a15c 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example04.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example04.component.ts @@ -4,7 +4,7 @@ import { Component, type OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, type AngularGridInstance, @@ -25,7 +25,7 @@ const URL_SAMPLE_COLLECTION_DATA = 'assets/data/collection_500_numbers.json'; @Component({ templateUrl: './example04.component.html', - imports: [AngularSlickgridModule, DatePipe], + imports: [AngularSlickgridComponent, DatePipe], }) export class Example4Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example05.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example05.component.ts index 175557fc82..f93813c224 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example05.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example05.component.ts @@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http'; import { ChangeDetectorRef, Component, type OnInit } from '@angular/core'; import { GridOdataService, type OdataOption, type OdataServiceApi } from '@slickgrid-universal/odata'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, PaginationMetadata, type AngularGridInstance, @@ -21,7 +21,7 @@ const PERCENT_HTML_ESCAPED = '%25'; @Component({ templateUrl: './example05.component.html', - imports: [AngularSlickgridModule, DatePipe], + imports: [AngularSlickgridComponent, DatePipe], }) export class Example5Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example06.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example06.component.ts index daeaa85688..be9a3967fb 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example06.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example06.component.ts @@ -11,7 +11,7 @@ import { } from '@slickgrid-universal/graphql'; import type { Subscription } from 'rxjs'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, unsubscribeAllObservables, @@ -31,7 +31,7 @@ const FAKE_SERVER_DELAY = 250; @Component({ templateUrl: './example06.component.html', - imports: [AngularSlickgridModule, DatePipe, FormsModule], + imports: [AngularSlickgridComponent, DatePipe, FormsModule], }) export class Example6Component implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example07.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example07.component.ts index 700c9da886..1be3c80c1a 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example07.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example07.component.ts @@ -1,5 +1,5 @@ import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; -import { AngularSlickgridModule, type AngularGridInstance, type Column, type GridOption } from '../../library'; +import { AngularSlickgridComponent, type AngularGridInstance, type Column, type GridOption } from '../../library'; // create a custom Formatter to highlight negative values in red let columns1WithHighlightingById: any = {}; @@ -9,7 +9,7 @@ let columns2WithHighlightingById: any = {}; styleUrls: ['./example07.component.scss'], encapsulation: ViewEncapsulation.None, templateUrl: './example07.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example7Component implements OnInit { columnDefinitions1: Column[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example08.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example08.component.ts index 6d9752ca11..e001e3ff21 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example08.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example08.component.ts @@ -1,13 +1,19 @@ import { Component, ViewEncapsulation, type OnDestroy, type OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import type { Subscription } from 'rxjs'; -import { AngularSlickgridModule, unsubscribeAllObservables, type AngularGridInstance, type Column, type GridOption } from '../../library'; +import { + AngularSlickgridComponent, + unsubscribeAllObservables, + type AngularGridInstance, + type Column, + type GridOption, +} from '../../library'; @Component({ templateUrl: './example08.component.html', styleUrls: ['./example08.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example8Component implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example09.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example09.component.ts index 2f5b21880c..47270e638b 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example09.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example09.component.ts @@ -2,7 +2,7 @@ import { Component, ViewEncapsulation, type OnDestroy, type OnInit } from '@angu import { TranslateService } from '@ngx-translate/core'; import type { Subscription } from 'rxjs'; import { - AngularSlickgridModule, + AngularSlickgridComponent, ExtensionName, Filters, Formatters, @@ -17,7 +17,7 @@ import { templateUrl: './example09.component.html', styleUrls: ['./example09.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example9Component implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example10.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example10.component.ts index 01e2b5348e..54a8c2b7e3 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example10.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example10.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectorRef, Component, type OnInit } from '@angular/core'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, type AngularGridInstance, @@ -12,7 +12,7 @@ import { @Component({ templateUrl: './example10.component.html', styles: ['.alert { padding: 8px; margin-bottom: 10px }', '.col-sm-1{ max-width: 70px }'], - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example10Component implements OnInit { angularGrid1!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example11.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example11.component.ts index 289da75e81..36d61bcc0c 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example11.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example11.component.ts @@ -1,6 +1,6 @@ import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Formatters, type AngularGridInstance, @@ -16,7 +16,7 @@ import { styles: ['.duration-bg { background-color: #e9d4f1 !important }'], encapsulation: ViewEncapsulation.None, templateUrl: './example11.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example11Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example12.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example12.component.ts index 6c1a4440d8..4af6714def 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example12.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example12.component.ts @@ -4,7 +4,7 @@ import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { TextExportService } from '@slickgrid-universal/text-export'; import type { Subscription } from 'rxjs'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, unsubscribeAllObservables, @@ -28,7 +28,7 @@ const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataCont @Component({ templateUrl: './example12.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example12Component implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example13.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example13.component.ts index ce6c779d3b..a1fe9b15c2 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example13.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example13.component.ts @@ -4,7 +4,7 @@ import { PdfExportService } from '@slickgrid-universal/pdf-export'; import { TextExportService } from '@slickgrid-universal/text-export'; import { Aggregators, - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, GroupTotalFormatters, @@ -20,7 +20,7 @@ const NB_ITEMS = 5000; @Component({ templateUrl: './example13.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example13Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example14.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example14.component.ts index 1263031908..eadff553dc 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example14.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example14.component.ts @@ -1,12 +1,12 @@ import { Component, type OnInit } from '@angular/core'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { PdfExportService } from '@slickgrid-universal/pdf-export'; -import { AngularSlickgridModule, type AngularGridInstance, type Column, type GridOption, type ItemMetadata } from '../../library'; +import { AngularSlickgridComponent, type AngularGridInstance, type Column, type GridOption, type ItemMetadata } from '../../library'; @Component({ templateUrl: './example14.component.html', styleUrls: ['./example14.component.scss'], - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example14Component implements OnInit { angularGrid1!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example15.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example15.component.ts index 9032b40c08..0113370ea7 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example15.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example15.component.ts @@ -3,7 +3,7 @@ import { format as tempoFormat } from '@formkit/tempo'; import { TranslateService } from '@ngx-translate/core'; import type { Subscription } from 'rxjs'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, unsubscribeAllObservables, @@ -24,7 +24,7 @@ const NB_ITEMS = 500; @Component({ templateUrl: './example15.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example15Component implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example16.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example16.component.ts index a7410eb948..d9cb6cf74d 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example16.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example16.component.ts @@ -1,6 +1,6 @@ import { Component, type OnInit } from '@angular/core'; import { - AngularSlickgridModule, + AngularSlickgridComponent, ExtensionName, Filters, Formatters, @@ -12,7 +12,7 @@ import { @Component({ templateUrl: './example16.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example16Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example17.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example17.component.ts index a2a6b420e2..8d59b31c1e 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example17.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example17.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; -import { AngularSlickgridModule, toCamelCase, type AngularGridInstance, type Column, type GridOption } from '../../library'; +import { AngularSlickgridComponent, toCamelCase, type AngularGridInstance, type Column, type GridOption } from '../../library'; const sampleDataRoot = 'assets/data'; @@ -9,7 +9,7 @@ const sampleDataRoot = 'assets/data'; styles: ['.file-upload { max-width: 300px; }'], encapsulation: ViewEncapsulation.None, templateUrl: './example17.component.html', - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example17Component { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example18.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example18.component.ts index aee46ba5dc..3844f0bce2 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example18.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example18.component.ts @@ -5,7 +5,7 @@ import { PdfExportService } from '@slickgrid-universal/pdf-export'; import { TextExportService } from '@slickgrid-universal/text-export'; import { Aggregators, - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Filters, Formatters, @@ -23,7 +23,7 @@ const NB_ITEMS = 10_000; @Component({ templateUrl: './example18.component.html', - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example18Component implements AfterViewInit, OnInit, OnDestroy { private _darkMode = false; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example19.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example19.component.ts index f9eb77a8d8..579b884e24 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example19.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example19.component.ts @@ -2,7 +2,7 @@ import { Component, type OnDestroy, type OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AngularSlickRowDetailView } from '@slickgrid-universal/angular-row-detail-plugin'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Filters, Formatters, @@ -18,7 +18,7 @@ const NB_ITEMS = 1000; @Component({ templateUrl: './example19.component.html', - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example19Component implements OnDestroy, OnInit { private _darkMode = false; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example20.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example20.component.ts index da3a86889b..d4baeba09b 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example20.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example20.component.ts @@ -1,7 +1,7 @@ import { Component, ViewEncapsulation, type OnDestroy, type OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Filters, formatNumber, @@ -17,7 +17,7 @@ import { templateUrl: './example20.component.html', styleUrls: ['./example20.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example20Component implements OnInit, OnDestroy { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example21.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example21.component.ts index ce68545342..4a79c5135f 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example21.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example21.component.ts @@ -1,7 +1,7 @@ import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Formatters, type AngularGridInstance, type Column, @@ -15,7 +15,7 @@ import { encapsulation: ViewEncapsulation.None, styleUrls: ['./example21.component.scss'], templateUrl: './example21.component.html', - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example21Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example22.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example22.component.ts index 923de3faff..d7c9cc9748 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example22.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example22.component.ts @@ -1,13 +1,13 @@ import { HttpClient } from '@angular/common/http'; import { Component, type OnInit } from '@angular/core'; import { TabDirective, TabsetComponent } from 'ngx-bootstrap/tabs'; -import { AngularSlickgridModule, Filters, type AngularGridInstance, type Column, type GridOption } from '../../library'; +import { AngularSlickgridComponent, Filters, type AngularGridInstance, type Column, type GridOption } from '../../library'; const URL_CUSTOMERS = 'assets/data/customers_100.json'; @Component({ templateUrl: './example22.component.html', - imports: [TabsetComponent, TabDirective, AngularSlickgridModule], + imports: [TabsetComponent, TabDirective, AngularSlickgridComponent], }) export class Example22Component implements OnInit { angularGrid2!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts index fbf8e36f11..6517c77d99 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts @@ -7,7 +7,7 @@ import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import type { Subscription } from 'rxjs'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, unsubscribeAllObservables, @@ -38,7 +38,7 @@ const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataCont @Component({ templateUrl: './example23.component.html', - imports: [FormsModule, AngularSlickgridModule, DatePipe], + imports: [AngularSlickgridComponent, DatePipe, FormsModule], }) export class Example23Component implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example24.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example24.component.ts index d47ee06c9b..ba9aeecdf7 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example24.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example24.component.ts @@ -3,7 +3,7 @@ import { TranslateService } from '@ngx-translate/core'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import type { Subscription } from 'rxjs'; import { - AngularSlickgridModule, + AngularSlickgridComponent, ExtensionName, Filters, Formatters, @@ -61,7 +61,7 @@ const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataCont templateUrl: './example24.component.html', styleUrls: ['./example24.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example24Component implements OnInit, OnDestroy { private _darkModeGrid = false; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example25.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example25.component.ts index be148a0a2f..0d21b3ba2b 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example25.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example25.component.ts @@ -3,7 +3,7 @@ import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; import { GraphqlService, type GraphqlResult, type GraphqlServiceApi } from '@slickgrid-universal/graphql'; import type { Observable } from 'rxjs'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, type AngularGridInstance, @@ -33,7 +33,7 @@ export interface Country { templateUrl: './example25.component.html', styleUrls: ['./example25.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example25Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example26.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example26.component.ts index 7d3e007945..ac099912b9 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example26.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example26.component.ts @@ -3,7 +3,7 @@ import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import { - AngularSlickgridModule, + AngularSlickgridComponent, AngularUtilService, Editors, Filters, @@ -30,7 +30,7 @@ const NB_ITEMS = 100; styleUrls: ['./example26.component.scss'], encapsulation: ViewEncapsulation.None, providers: [AngularUtilService], - imports: [AngularSlickgridModule, JsonPipe], + imports: [AngularSlickgridComponent, JsonPipe], }) export class Example26Component implements OnInit { private _commandQueue: any[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example27.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example27.component.ts index e181eff647..6d5ff53dee 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example27.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example27.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, ViewEncapsulation, type OnInit } from '@angular/core'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, type AngularGridInstance, @@ -18,7 +18,7 @@ const NB_ITEMS = 500; templateUrl: './example27.component.html', styleUrls: ['example27.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example27Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example28.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example28.component.ts index f4215c57a2..9ea5a984a7 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example28.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example28.component.ts @@ -4,7 +4,7 @@ import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { addWhiteSpaces, Aggregators, - AngularSlickgridModule, + AngularSlickgridComponent, decimalFormatted, Filters, findItemInTreeStructure, @@ -21,7 +21,7 @@ import { templateUrl: './example28.component.html', styleUrls: ['example28.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example28Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example29.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example29.component.ts index 793a94982d..ebea00f149 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example29.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example29.component.ts @@ -1,5 +1,5 @@ import { Component, type OnInit } from '@angular/core'; -import { AngularSlickgridModule, Formatters, type AngularGridInstance, type Column, type GridOption } from '../../library'; +import { AngularSlickgridComponent, Formatters, type AngularGridInstance, type Column, type GridOption } from '../../library'; const NB_ITEMS = 995; @@ -21,7 +21,7 @@ export class CustomFooterComponent { @Component({ templateUrl: './example29.component.html', - imports: [AngularSlickgridModule, CustomFooterComponent], + imports: [AngularSlickgridComponent, CustomFooterComponent], }) export class Example29Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example30.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example30.component.ts index 2c19c6179a..9209cef6b2 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example30.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example30.component.ts @@ -4,7 +4,7 @@ import { SlickCompositeEditor, SlickCompositeEditorComponent } from '@slickgrid- import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Filters, formatNumber, @@ -87,7 +87,7 @@ const myCustomTitleValidator = (value: any, args: any) => { templateUrl: './example30.component.html', styleUrls: ['./example30.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example30Component implements OnDestroy, OnInit { private _darkMode = false; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example32.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example32.component.ts index df68c94fe2..8f2cb60b97 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example32.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example32.component.ts @@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http'; import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Filters, formatNumber, @@ -44,7 +44,7 @@ const myCustomTitleValidator = (value: any) => { templateUrl: './example32.component.html', styleUrls: ['./example32.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example32Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example33.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example33.component.ts index 5eeb5977ae..daa1191b11 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example33.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example33.component.ts @@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms'; import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Filters, Formatters, @@ -25,7 +25,7 @@ const NB_ITEMS = 1000; templateUrl: './example33.component.html', styleUrls: ['./example33.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [FormsModule, NgClass, AngularSlickgridModule], + imports: [FormsModule, NgClass, AngularSlickgridComponent], }) export class Example33Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example34.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example34.component.ts index cc428d790b..75074409f3 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example34.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example34.component.ts @@ -4,7 +4,7 @@ import { faker } from '@faker-js/faker'; import sparkline from '@fnando/sparkline'; import { Aggregators, - AngularSlickgridModule, + AngularSlickgridComponent, createDomElement, deepCopy, Filters, @@ -80,7 +80,7 @@ const historicSparklineFormatter: Formatter = (_row, _cell, _value: string, _col templateUrl: './example34.component.html', styleUrls: ['./example34.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example34Component implements OnDestroy, OnInit { private _darkMode = false; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example35.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example35.component.ts index a36db153f3..215ecd338e 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example35.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example35.component.ts @@ -2,7 +2,7 @@ import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin'; import type { Subscription } from 'rxjs'; -import { AngularSlickgridModule, Editors, Formatters, type AngularGridInstance, type Column, type GridOption } from '../../library'; +import { AngularSlickgridComponent, Editors, Formatters, type AngularGridInstance, type Column, type GridOption } from '../../library'; const NB_ITEMS = 20; @@ -10,7 +10,7 @@ const NB_ITEMS = 20; encapsulation: ViewEncapsulation.None, styleUrls: ['./example35.component.scss'], templateUrl: './example35.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example35Component implements OnInit { private subscriptions: Subscription[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example36.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example36.component.ts index 5a416ea828..ec6b917ecb 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example36.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example36.component.ts @@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { Aggregators, - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Formatters, GroupTotalFormatters, @@ -99,7 +99,7 @@ export class CustomSumAggregator implements Aggregator { templateUrl: './example36.component.html', styleUrls: ['./example36.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example36Component implements OnInit { columnDefinitions: Column[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example37.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example37.component.ts index fb46ec08c1..e0142b6248 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example37.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example37.component.ts @@ -1,6 +1,6 @@ import { Component, type OnDestroy, type OnInit } from '@angular/core'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Editors, type AngularGridInstance, type Column, @@ -12,7 +12,7 @@ const NB_ITEMS = 100; @Component({ templateUrl: './example37.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example37Component implements OnDestroy, OnInit { private _darkMode = false; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example38.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example38.component.ts index 11dc1bdc3f..20967b3e33 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example38.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example38.component.ts @@ -4,7 +4,7 @@ import { ChangeDetectorRef, Component, ViewEncapsulation, type OnInit } from '@a import { GridOdataService, type OdataServiceApi } from '@slickgrid-universal/odata'; import { Aggregators, - AngularSlickgridModule, + AngularSlickgridComponent, Filters, SortComparers, type AngularGridInstance, @@ -23,7 +23,7 @@ const PERCENT_HTML_ESCAPED = '%25'; styleUrls: ['./example38.component.scss'], encapsulation: ViewEncapsulation.None, templateUrl: './example38.component.html', - imports: [AngularSlickgridModule, DatePipe], + imports: [AngularSlickgridComponent, DatePipe], }) export class Example38Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example39.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example39.component.ts index f86e1184bb..086be24a23 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example39.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example39.component.ts @@ -6,7 +6,7 @@ import { TranslateService } from '@ngx-translate/core'; import { GraphqlService, type GraphqlPaginatedResult, type GraphqlServiceApi } from '@slickgrid-universal/graphql'; import { type Subscription } from 'rxjs'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, unsubscribeAllObservables, type AngularGridInstance, @@ -29,7 +29,7 @@ function unescapeAndLowerCase(val: string) { styleUrls: ['./example39.component.scss'], encapsulation: ViewEncapsulation.None, templateUrl: './example39.component.html', - imports: [AngularSlickgridModule, DatePipe, FormsModule], + imports: [AngularSlickgridComponent, DatePipe, FormsModule], }) export class Example39Component implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example40.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example40.component.ts index 09ef2f9836..891abf05ed 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example40.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example40.component.ts @@ -3,7 +3,7 @@ import { Component, type OnInit } from '@angular/core'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { Aggregators, - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, SortComparers, @@ -21,7 +21,7 @@ const FETCH_SIZE = 50; @Component({ templateUrl: './example40.component.html', - imports: [AngularSlickgridModule, DatePipe], + imports: [AngularSlickgridComponent, DatePipe], }) export class Example40Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example41.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example41.component.ts index 02f52278e2..6409a24eed 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example41.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example41.component.ts @@ -1,6 +1,6 @@ import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Formatters, isDefined, @@ -14,7 +14,7 @@ import { templateUrl: './example41.component.html', styleUrls: ['./example41.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example41Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example42.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example42.component.ts index f095159020..c6a33298e6 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example42.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example42.component.ts @@ -1,7 +1,7 @@ import { Component, type OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { - AngularSlickgridModule, + AngularSlickgridComponent, AngularUtilService, Filters, Formatters, @@ -22,7 +22,7 @@ function randomBetween(min: number, max: number): number { @Component({ templateUrl: './example42.component.html', providers: [AngularUtilService], - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example42Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example43.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example43.component.ts index 580f354203..499b493d74 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example43.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example43.component.ts @@ -1,12 +1,19 @@ import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; -import { AngularSlickgridModule, Editors, type AngularGridInstance, type Column, type GridOption, type ItemMetadata } from '../../library'; +import { + AngularSlickgridComponent, + Editors, + type AngularGridInstance, + type Column, + type GridOption, + type ItemMetadata, +} from '../../library'; @Component({ styleUrls: ['example43.component.scss'], templateUrl: './example43.component.html', encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example43Component implements OnInit { columnDefinitions: Column[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example44.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example44.component.ts index c952c8a8ba..c6bb5f46c2 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example44.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example44.component.ts @@ -2,7 +2,7 @@ import { Component, ViewEncapsulation, type OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { - AngularSlickgridModule, + AngularSlickgridComponent, type AngularGridInstance, type Column, type Formatter, @@ -18,7 +18,7 @@ const rowCellValueExportFormatter: Formatter = (_row, _cell, value) => value.toF styleUrls: ['example44.component.scss'], templateUrl: './example44.component.html', encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example44Component implements OnInit { columnDefinitions: Column[] = []; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example45-detail.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example45-detail.component.ts index 0b90da82fe..10dc61101e 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example45-detail.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example45-detail.component.ts @@ -1,5 +1,5 @@ import { Component, ViewEncapsulation, type OnDestroy, type OnInit } from '@angular/core'; -import { AngularSlickgridModule, type AngularGridInstance, type Column, type GridOption, type GridState } from '../../library'; +import { AngularSlickgridComponent, type AngularGridInstance, type Column, type GridOption, type GridState } from '../../library'; export interface Distributor { id: number; @@ -24,7 +24,7 @@ export interface OrderData { styles: ['.innergrid { --slick-header-menu-display: inline-block; }'], templateUrl: './example45-detail.component.html', encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example45DetailComponent implements OnDestroy, OnInit { model!: Distributor; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example45.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example45.component.ts index 40e925366f..38ef8e7058 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example45.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example45.component.ts @@ -2,7 +2,7 @@ import { Component, ViewEncapsulation, type OnDestroy, type OnInit } from '@angu import { FormsModule } from '@angular/forms'; import { faker } from '@faker-js/faker'; import { AngularSlickRowDetailView } from '@slickgrid-universal/angular-row-detail-plugin'; -import { AngularSlickgridModule, type AngularGridInstance, type Column, type GridOption } from '../../library'; +import { AngularSlickgridComponent, type AngularGridInstance, type Column, type GridOption } from '../../library'; import { Example45DetailComponent, type Distributor, type OrderData } from './example45-detail.component'; import { RowDetailPreloadComponent } from './rowdetail-preload.component'; @@ -13,7 +13,7 @@ const NB_ITEMS = 995; styleUrls: ['example45.component.scss'], templateUrl: './example45.component.html', encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example45Component implements OnDestroy, OnInit { private _darkMode = false; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example46.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example46.component.ts index 0128865203..2bad7b4463 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example46.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example46.component.ts @@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { TextExportService } from '@slickgrid-universal/text-export'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Filters, Formatters, type AngularGridInstance, @@ -41,7 +41,7 @@ const coloredTextFormatter: Formatter = (_row: number, _cell: number, val: any, templateUrl: './example46.component.html', styleUrls: ['example46.component.scss'], encapsulation: ViewEncapsulation.None, - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example46Component implements OnInit { angularGrid!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example47.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example47.component.ts index a16955c510..eedf624689 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example47.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example47.component.ts @@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms'; import { AngularSlickRowDetailView } from '@slickgrid-universal/angular-row-detail-plugin'; import { Aggregators, - AngularSlickgridModule, + AngularSlickgridComponent, Editors, Filters, Formatters, @@ -34,7 +34,7 @@ export interface Item { @Component({ templateUrl: './example47.component.html', - imports: [AngularSlickgridModule, FormsModule], + imports: [AngularSlickgridComponent, FormsModule], }) export class Example47Component implements OnDestroy, OnInit { private _darkMode = false; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example48.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example48.component.ts index bb1f225f2a..b12280aa58 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example48.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example48.component.ts @@ -1,7 +1,7 @@ import { Component, type OnInit } from '@angular/core'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Formatters, SlickEventHandler, type AngularGridInstance, @@ -14,7 +14,7 @@ const NB_ITEMS = 995; @Component({ templateUrl: './example48.component.html', // styles: ['#grid48-1 { .slick-row .slick-cell:first-child { border-right: 1px solid #d4d4d4; } }'], - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example48Component implements OnInit { protected _eventHandler = new SlickEventHandler(); diff --git a/frameworks/angular-slickgrid/src/demos/examples/example49.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example49.component.ts index 8dab35abe0..691b13009e 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example49.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example49.component.ts @@ -1,6 +1,6 @@ import { Component, type OnDestroy, type OnInit } from '@angular/core'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Editors, SlickSelectionUtils, type AngularGridInstance, @@ -14,7 +14,7 @@ const NB_ITEMS = 100; @Component({ templateUrl: './example49.component.html', styleUrls: ['example49.component.scss'], - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example49Component implements OnDestroy, OnInit { private _darkMode = false; diff --git a/frameworks/angular-slickgrid/src/demos/examples/example50.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example50.component.ts index e19ea2128d..78bbf78058 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example50.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example50.component.ts @@ -1,6 +1,6 @@ import { Component, type OnInit } from '@angular/core'; import { - AngularSlickgridModule, + AngularSlickgridComponent, Formatters, OnClickEventArgs, type AngularGridInstance, @@ -27,7 +27,7 @@ export interface OrderData { @Component({ templateUrl: './example50.component.html', - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class Example50Component implements OnInit { angularGrid1!: AngularGridInstance; diff --git a/frameworks/angular-slickgrid/src/demos/examples/swt-common-grid.component.ts b/frameworks/angular-slickgrid/src/demos/examples/swt-common-grid.component.ts index 6b02a8ef23..c11bffa23d 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/swt-common-grid.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/swt-common-grid.component.ts @@ -4,9 +4,8 @@ import { HttpClient } from '@angular/common/http'; import { Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild, type AfterViewInit, type OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { - AngularSlickgridModule, + AngularSlickgridComponent, type AngularGridInstance, - type AngularSlickgridComponent, type BackendService, type BackendServiceOption, type Column, @@ -49,7 +48,7 @@ const DEFAULT_FILTER_TYPING_DEBOUNCE = 750; } `, ], - imports: [AngularSlickgridModule], + imports: [AngularSlickgridComponent], }) export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendService { private logger: Logger; diff --git a/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts b/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts index c2d19159e1..9d4fed1960 100644 --- a/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts +++ b/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts @@ -1,3 +1,4 @@ +import { NgTemplateOutlet } from '@angular/common'; import { ApplicationRef, ChangeDetectorRef, @@ -86,7 +87,7 @@ export interface AngularSlickRowDetailView { selector: 'angular-slickgrid', templateUrl: './angular-slickgrid.component.html', providers: [AngularUtilService, TranslaterService], // make everything transient (non-singleton) - standalone: false, + imports: [NgTemplateOutlet], }) export class AngularSlickgridComponent implements AfterViewInit, OnDestroy { protected _dataset?: TData[] | null; @@ -421,8 +422,8 @@ export class AngularSlickgridComponent implements AfterViewInit, On protected readonly elm: ElementRef, @Optional() protected readonly translate: TranslateService, @Optional() protected readonly translaterService: TranslaterService, - @Inject('config') protected forRootConfig: GridOption, - @Inject('externalService') externalServices: ExternalTestingDependencies + @Optional() @Inject('defaultGridOption') protected forRootConfig?: GridOption, + @Optional() @Inject('externalService') externalServices?: ExternalTestingDependencies ) { const slickgridConfig = new SlickgridConfig(); @@ -1540,12 +1541,12 @@ export class AngularSlickgridComponent implements AfterViewInit, On if ( options?.pagination && (gridOptions.enablePagination || gridOptions.backendServiceApi) && - (this.forRootConfig.pagination || gridOptions.pagination) + (this.forRootConfig?.pagination || gridOptions.pagination) ) { options.pagination.pageSize = - gridOptions.pagination?.pageSize ?? this.forRootConfig.pagination?.pageSize ?? GlobalGridOptions.pagination!.pageSize; + gridOptions.pagination?.pageSize ?? this.forRootConfig?.pagination?.pageSize ?? GlobalGridOptions.pagination!.pageSize; options.pagination.pageSizes = - gridOptions.pagination?.pageSizes ?? this.forRootConfig.pagination?.pageSizes ?? GlobalGridOptions.pagination!.pageSizes; + gridOptions.pagination?.pageSizes ?? this.forRootConfig?.pagination?.pageSizes ?? GlobalGridOptions.pagination!.pageSizes; } // also make sure to show the header row if user have enabled filtering diff --git a/frameworks/angular-slickgrid/src/library/index.ts b/frameworks/angular-slickgrid/src/library/index.ts index 09706c68ec..25c79acf5b 100644 --- a/frameworks/angular-slickgrid/src/library/index.ts +++ b/frameworks/angular-slickgrid/src/library/index.ts @@ -8,4 +8,3 @@ export { AngularUtilService, unsubscribeAllObservables } from './services/index' export { SlickgridConfig } from './slickgrid-config'; export type { AngularSlickgridOutputs } from './components/angular-slickgrid-outputs.interface'; export { AngularSlickgridComponent } from './components/angular-slickgrid.component'; -export { AngularSlickgridModule } from './modules/angular-slickgrid.module'; diff --git a/frameworks/angular-slickgrid/src/library/modules/angular-slickgrid.module.spec.ts b/frameworks/angular-slickgrid/src/library/modules/angular-slickgrid.module.spec.ts deleted file mode 100644 index 43f297c3ae..0000000000 --- a/frameworks/angular-slickgrid/src/library/modules/angular-slickgrid.module.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { beforeEach, describe, expect, it } from 'vitest'; -import { AngularSlickgridModule } from './angular-slickgrid.module.js'; - -describe('AppComponent', () => { - let angularSlickgridModule: AngularSlickgridModule; - - beforeEach(() => { - angularSlickgridModule = new AngularSlickgridModule(); - }); - - it('should create an instance', () => { - expect(angularSlickgridModule).toBeTruthy(); - }); - - it('should create an instance with providers via forRoot()', () => { - const angularSlickgridModuleWithProviders = AngularSlickgridModule.forRoot(); - expect(angularSlickgridModuleWithProviders.providers![0]).toEqual({ provide: 'config', useValue: {} }); - }); - - it('should create an instance with providers via forRoot() with extra config options', () => { - const angularSlickgridModuleWithProviders = AngularSlickgridModule.forRoot({ enableAutoResize: true }); - expect(angularSlickgridModuleWithProviders.providers![0]).toEqual({ provide: 'config', useValue: { enableAutoResize: true } }); - }); -}); diff --git a/frameworks/angular-slickgrid/src/library/modules/angular-slickgrid.module.ts b/frameworks/angular-slickgrid/src/library/modules/angular-slickgrid.module.ts deleted file mode 100644 index 997971f2d4..0000000000 --- a/frameworks/angular-slickgrid/src/library/modules/angular-slickgrid.module.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule, type ModuleWithProviders } from '@angular/core'; -import { TranslateModule } from '@ngx-translate/core'; -import { AngularSlickgridComponent } from '../components/angular-slickgrid.component'; -import type { GridOption } from '../models/gridOption.interface'; -import { AngularUtilService } from '../services/angularUtil.service'; -import { ContainerService } from '../services/container.service'; - -@NgModule({ - imports: [CommonModule, TranslateModule], - declarations: [AngularSlickgridComponent], - exports: [AngularSlickgridComponent], -}) -export class AngularSlickgridModule { - static forRoot(config: GridOption = {}): ModuleWithProviders { - return { - ngModule: AngularSlickgridModule, - providers: [ - { provide: 'config', useValue: config }, - { provide: 'externalService', useValue: null }, - AngularUtilService, - ContainerService, - ], - }; - } -} diff --git a/frameworks/angular-slickgrid/src/library/services/container.service.ts b/frameworks/angular-slickgrid/src/library/services/container.service.ts index e987990834..749cc3ff02 100644 --- a/frameworks/angular-slickgrid/src/library/services/container.service.ts +++ b/frameworks/angular-slickgrid/src/library/services/container.service.ts @@ -1,7 +1,9 @@ import { Injectable } from '@angular/core'; import type { ContainerInstance, ContainerService as UniversalContainerService } from '@slickgrid-universal/common'; -@Injectable() +@Injectable({ + providedIn: 'root', // This ensures it can be injected anywhere +}) export class ContainerService implements UniversalContainerService { dependencies: ContainerInstance[] = []; diff --git a/frameworks/angular-slickgrid/src/main.ts b/frameworks/angular-slickgrid/src/main.ts index ccb3a09e4b..c66d82f9ff 100644 --- a/frameworks/angular-slickgrid/src/main.ts +++ b/frameworks/angular-slickgrid/src/main.ts @@ -2,41 +2,39 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http' import { enableProdMode, importProvidersFrom, inject, Injector, provideAppInitializer, provideZoneChangeDetection } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; import { NgSelectModule } from '@ng-select/ng-select'; import { provideTranslateService, TranslateService } from '@ngx-translate/core'; import { provideTranslateHttpLoader } from '@ngx-translate/http-loader'; import DOMPurify from 'dompurify'; import { TabsModule } from 'ngx-bootstrap/tabs'; -import { AppRoutingRoutingModule } from './demos/app-routing.module'; +import { routes } from './demos/app-routing.module'; import { AppComponent } from './demos/app.component'; -import { appInitializerFactory } from './demos/app.module'; +import { appInitializerFactory } from './demos/app.initializer'; import { environment } from './demos/environments/environment'; -import { AngularSlickgridModule } from './library/modules/angular-slickgrid.module'; +import { AngularSlickgridComponent, GridOption } from './library'; if (environment.production) { enableProdMode(); } +// define Angular-Slickgrid default grid options that are common to all grids +const gridOptionConfig: GridOption = { + enableAutoResize: true, + autoResize: { + container: '#demo-container', + rightPadding: 10, + }, + // we strongly suggest you add DOMPurify as a sanitizer for security reasons (XSS, etc.) + // the "level" attribute is used by SlickGrid for Grouping & Tree Data level indentation + sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml, { ADD_ATTR: ['level'], RETURN_TRUSTED_TYPE: true }), +}; + bootstrapApplication(AppComponent, { providers: [ - importProvidersFrom( - AppRoutingRoutingModule, - BrowserModule, - FormsModule, - NgSelectModule, - TabsModule.forRoot(), - AngularSlickgridModule.forRoot({ - // add any Angular-Slickgrid global Grid Options/Config you might want - // that is to avoid passing the same options over and over in all your grids - enableAutoResize: true, - autoResize: { - container: '#demo-container', - rightPadding: 10, - }, - // we strongly suggest you add DOMPurify as a sanitizer for security reasons (XSS, etc.) - sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml, { ADD_ATTR: ['level'], RETURN_TRUSTED_TYPE: true }), - }) - ), + importProvidersFrom(BrowserModule, FormsModule, NgSelectModule, RouterModule.forRoot(routes, { useHash: true }), TabsModule.forRoot()), + AngularSlickgridComponent, + { provide: 'defaultGridOption', useValue: gridOptionConfig }, provideAppInitializer(() => { const initializerFn = appInitializerFactory(inject(TranslateService), inject(Injector)); return initializerFn(); From 9091ca3f8b957ed3c8717aa66d5f1ff8eb7b2aa7 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 29 Jan 2026 22:22:00 -0500 Subject: [PATCH 2/6] docs: add standalone component changes to migration --- .../docs/migrations/migration-to-10.x.md | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md b/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md index a2ea98514d..01d9fb7582 100644 --- a/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md +++ b/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md @@ -6,6 +6,7 @@ One of the biggest change in this release is to hide columns by using the `hidde - [`hidden` columns](#hidden-columns) - [Row Detail (now optional)](#row-detail-now-optional) - [ngx-translate@v17](#ngx-translate-v17x-now-required) +- [Migrating to Standalone Component](#migrating-to-standalone-component) > **Note:** if you come from an earlier version, please make sure to follow each migrations in their respected order (review previous migration guides) @@ -100,6 +101,42 @@ Because of the Angular v21 upgrade, the user (you) will also need to upgrade [`n For the complete list of changes, please follow `ngx-translate` migration from their website: - https://ngx-translate.org/getting-started/migration-guide/ +### Migrating to Standalone Component + +Angular-Slickgrid is now a Standalone Component and the `AngularSlickgridModule` was dropped, this also requires you to make some small changes in your App `main.ts` and in all your components that use Angular-Slickgrid. + +```diff +- import { AngularSlickgridModule } from 'angular-slickgrid'; ++ import { AngularSlickgridComponent, GridOption } from 'angular-slickgrid'; + +// optional global Grid Option ++ const gridOptionConfig: GridOption = { ++ // ... ++ sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml, { ADD_ATTR: ['level'], RETURN_TRUSTED_TYPE: true }), ++ }; + +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom( +- AngularSlickgridModule.forRoot({ +- // ... +- sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml, { ADD_ATTR: ['level'], RETURN_TRUSTED_TYPE: true }), +- }) + ), ++ AngularSlickgridComponent, ++ { provide: 'defaultGridOption', useValue: gridOptionConfig }, + // ... + ], +}); + +// ... Component +@Component({ + // ... +- imports: [AngularSlickgridModule], ++ imports: [AngularSlickgridComponent], +}) +``` + {% hint style="note" %} **Info** the changes in the next few lines were all mentioned in the previous "Migration Guide v9.0". So, if you have already made these changes then you could skip the section below. {% endhint %} From ea146a2663dea52336f8988104a552fe5981a168 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 2 Feb 2026 10:30:39 -0500 Subject: [PATCH 3/6] chore: fix failing Cypress test --- .../src/demos/examples/example23.component.ts | 3 +-- .../angular-slickgrid/test/cypress/e2e/example23.cy.ts | 5 ----- package.json | 10 +++++----- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts index 6517c77d99..c88793edad 100644 --- a/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts +++ b/frameworks/angular-slickgrid/src/demos/examples/example23.component.ts @@ -180,9 +180,8 @@ export class Example23Component implements OnInit, OnDestroy { }, ]; - const today = new Date(); const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD'); - const presetHighestDay = format(addDay(new Date(), today.getDate() < 14 ? 28 : 25), 'YYYY-MM-DD'); + const presetHighestDay = format(addDay(new Date(), 25), 'YYYY-MM-DD'); this.gridOptions = { autoResize: { diff --git a/frameworks/angular-slickgrid/test/cypress/e2e/example23.cy.ts b/frameworks/angular-slickgrid/test/cypress/e2e/example23.cy.ts index cc05b1bd44..a4cf6a8d68 100644 --- a/frameworks/angular-slickgrid/test/cypress/e2e/example23.cy.ts +++ b/frameworks/angular-slickgrid/test/cypress/e2e/example23.cy.ts @@ -124,11 +124,8 @@ describe('Example 23 - Range Filters', () => { it('should change the "Finish" date in the picker and expect all rows to be within new dates range', () => { cy.get('.date-picker.search-filter.filter-finish').click(); - cy.get('[data-vc-date-selected="first"]').should('exist'); - cy.get('[data-vc-date-selected="middle"]').should('have.length.gte', 2); - cy.get('[data-vc-date-selected="last"]').should('exist'); }); @@ -137,9 +134,7 @@ describe('Example 23 - Range Filters', () => { const newMax = 40; cy.get('[data-test=clear-filters]').click({ force: true }); - cy.get('.search-filter.filter-duration').focus().type(`${newMin}..${newMax}`); - cy.get('#grid23') .find('.slick-row') .each(($row, idx) => { diff --git a/package.json b/package.json index 4468b6627d..d16bb98dcd 100644 --- a/package.json +++ b/package.json @@ -16,12 +16,12 @@ "docs:2": "// Start Dev by choosing the appropriate framework below (ie: 'dev:angular'), the single word 'dev' is to start the Vanilla flavor (default)", "docs:3": "// Start Cypress tests by choosing your framework (ie: 'angular:cypress'), default is 'cypress' to test Vanilla flavor (default)", "dev": "pnpm build:universal && run-p dev:watch vite:watch", - "dev:angular": "pnpm build:universal && run-p universal:watch angular:watch", - "dev:aurelia": "pnpm build:universal && pnpm aurelia:build:framework && run-p universal:watch aurelia:watch", - "dev:react": "pnpm build:universal && pnpm react:build:framework && run-p universal:watch react:watch", - "dev:vue": "pnpm build:universal && pnpm vue:build:framework && run-p universal:watch vue:watch", + "dev:angular": "pnpm build:universal && pnpm angular:build:framework-plugins && run-p universal:watch angular:watch", + "dev:aurelia": "pnpm build:universal && pnpm aurelia:build:framework-plugins && pnpm aurelia:build:framework && run-p universal:watch aurelia:watch", + "dev:react": "pnpm build:universal && pnpm react:build:framework-plugins && pnpm react:build:framework && run-p universal:watch react:watch", + "dev:vue": "pnpm build:universal && pnpm vue:build:framework-plugins && pnpm vue:build:framework && run-p universal:watch vue:watch", "dev:watch": "lerna watch --no-bail --scope=@slickgrid-universal/* --glob=\"src/**/*.{ts,scss}\" --ignored=\"**/*.spec.ts\" -- cross-env-shell pnpm run -r --filter $LERNA_PACKAGE_NAME dev", - "build": "pnpm clean && pnpm lint && pnpm build:universal && pnpm build:frameworks && pnpm angular:build:demo", + "build": "pnpm clean && pnpm lint && pnpm build:universal && pnpm pnpm build:frameworks && pnpm angular:build:demo", "bundle:zip": "pnpm clean && pnpm lint && pnpm build:universal && pnpm -r --stream --filter=./packages/** run bundle:zip", "clean": "remove --glob {demos,frameworks,frameworks-plugins,packages}/*/dist --glob=packages/*/tsconfig.tsbuildinfo", "cypress": "cypress open --config-file test/cypress.config.ts", From 150f6a99568cef423ee807e01361ac5f935f3e41 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 2 Feb 2026 10:45:01 -0500 Subject: [PATCH 4/6] refactor: as per PR review comment --- .../src/library/components/angular-slickgrid.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts b/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts index 9d4fed1960..21bf762955 100644 --- a/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts +++ b/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts @@ -148,8 +148,8 @@ export class AngularSlickgridComponent implements AfterViewInit, On sortService: SortService; treeDataService: TreeDataService; - @Input() customDataView: any; - @Input() gridId = ''; + @Input() readonly customDataView: any; + @Input() readonly gridId = ''; @Input() options: GridOption = {}; @Input() From e17e9e71c1683af62dfcc07692928df042e14acc Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 4 Feb 2026 17:49:18 -0500 Subject: [PATCH 5/6] docs: add message about postponing `@Input`/`@Output` in the lib --- .../docs/migrations/migration-to-10.x.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md b/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md index b7cdab7858..439c9cc68d 100644 --- a/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md +++ b/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md @@ -281,4 +281,10 @@ Deprecating `ExtensionName` enum which will be replaced by its string literal ty | Search (regex) | Replace | | ------------------------------ | -------- | -| `ExtensionName\.([a-z_]+)(.*)` | `'$1'$2` | \ No newline at end of file +| `ExtensionName\.([a-z_]+)(.*)` | `'$1'$2` | + +### Potential but Postponed Code Change + +Signals are becoming increasingly prevalent in Angular, however Angular-Slickgrid continues to use traditional `@Input`/`@Output` decorators. Users who prefer Signals can still use them by calling signal functions in templates: `[dataset]="dataset()"`. + +For a library component, maintaining compatibility with both approaches is pragmatic and may not require a full migration. If we decide to migrate Angular-Slickgrid to use Signals internally, this change would be deferred to version 11 or later. \ No newline at end of file From 67304a4626581ae9d7c2afd373ed1bc981aeee3e Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 4 Feb 2026 18:03:19 -0500 Subject: [PATCH 6/6] docs: add quick mention on more modern Angular patterns --- .../angular-slickgrid/docs/migrations/migration-to-10.x.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md b/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md index 439c9cc68d..f0ea5e9680 100644 --- a/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md +++ b/frameworks/angular-slickgrid/docs/migrations/migration-to-10.x.md @@ -1,7 +1,8 @@ ## Cleaner Code / Smaller Code ⚡ - One of the biggest change in this release is to hide columns by using the `hidden` column property (used by Column Picker, Grid Menu, etc...). Previously we were removing columns from the original columns array and we then called `setColumns()` to update the grid, but this mean that we had to keep references for all columns and visible columns. With this new release we now keep the full columns array at all time and instead we just change column(s) visibility via their `hidden` column properties by using `grid.updateColumnById('id', { hidden: true })` and finally we update the grid via `grid.updateColumns()`. What I'm trying to emphasis is that you should really stop using `grid.setColumns()`, and if you want to hide some columns when declaring the columns, then just update their `hidden` properties, see more details below... +This release fully aligns Angular-Slickgrid with modern Angular patterns, including Angular 21 support, Standalone Components for simplified setup, and zoneless change detection support which allows you to drop the `zone.js` dependency for improved performance and smaller bundle sizes. + #### Major Changes - Quick Summary - [`hidden` columns](#hidden-columns) - [Row Detail (now optional)](#row-detail-now-optional)