feat(angular)!: migrate Angular-Slickgrid to Standalone Component

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",

frameworks/angular-slickgrid/.oxlintrc.json

@@ -27,7 +27,7 @@
         "style": "kebab-case"
       }
     ],
-    "@angular-eslint/prefer-standalone": "off",
+    "@angular-eslint/prefer-standalone": "error",
     "typescript/no-unused-expressions": "off",
     "typescript/no-unused-vars": [
       "error",

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)

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: {

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
 </div>
 ```
 
-### 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,22 +244,22 @@ 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`)
 
 ##### 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.

frameworks/angular-slickgrid/docs/grid-functionalities/Global-Options.md → 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.
+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.

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

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.

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<any>((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.