how to use Angular-Slickgrid as a Standalone Component with Angular 18

[Phingn]

I am implementing it without app.module.ts
Any suggestions would be great. Thanks and advance

[zewa666]

can you share a repro of what you tried so far? I've just updated to v18 but got it working since 16 or so

[Phingn]

thanks @zewa666. But still having issues and below are my codes and error

[Phingn]

app.config.ts

import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideNativeDateAdapter } from '@angular/material/core';
import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
import { AngularSlickgridModule } from 'angular-slickgrid';
import { provideToastr } from 'ngx-toastr';

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideNativeDateAdapter(),
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
importProvidersFrom(HttpClientModule), provideAnimationsAsync(),
provideToastr(),
importProvidersFrom(AngularSlickgridModule.forRoot())
]
};

[Phingn]

grid.component.ts

import { Component, OnInit, NgModule, Injectable, importProvidersFrom } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { ContainerService } from 'angular-slickgrid';

import {
Column,
GridOption,
Formatters,
AngularGridInstance,
AngularSlickgridModule,
} from 'angular-slickgrid';

@component({
selector: 'app-grid',
standalone: true,
templateUrl: './grids.component.html',
styleUrl: './grids.component.css',
providers: [
ContainerService,
AngularSlickgridModule,
],
})

export class GridsComponent implements OnInit {

columnDefinitions!: Column[];
dataset!: any[];
gridOptions!: GridOption;

constructor(private toaster: ToastrService) {

}

showSuccessfulToast(){
this.toaster.success("show succesfull task", "Success", {positionClass: 'toast-bottom-right'});
}
showInfoToast(){
this.toaster.info("Info message", "Info")
}
showWarningToast(){
this.toaster.warning("warning message", "Warning")
}
showErrorToast(){
this.toaster.error("Error message", "Error", {positionClass: 'toast-bottom-right'});
}

isBrowserDarkModeEnabled() {
return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
}

ngOnInit(): void {
this.prepareGrid();
}

prepareGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', sortable: true },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
{ id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
{ id: 'start', name: 'Start', field: 'start' },
{ id: 'finish', name: 'Finish', field: 'finish' },
];

this.gridOptions = {
  darkMode: false,
  enablePagination: true,
  pagination: {
    pageSizes: [2, 4, 8, 10, 12],
    pageSize: 2
}

};

// fill the dataset with your data (or read it from the DB)


this.dataset = [
  { id: 0, title: 'Task 1', duration: 15, percentComplete: 5, start: '2001-01-01', finish: '2001-01-31' },
  { id: 1, title: 'Task 2', duration: 20, percentComplete: 10, start: '2002-02-11', finish: '2001-02-04' },
  { id: 2, title: 'Task 3', duration: 25, percentComplete: 15, start: '2003-03-01', finish: '2001-01-31' },
  { id: 3, title: 'Task 4', duration: 30, percentComplete: 20, start: '2003-03-11', finish: '2001-02-04' },
  { id: 4, title: 'Task 5', duration: 35, percentComplete: 25, start: '2003-04-01', finish: '2001-01-31' },
  { id: 5, title: 'Task 6', duration: 40, percentComplete: 30, start: '2004-01-04', finish: '2001-02-04' },
  { id: 6, title: 'Task 7', duration: 45, percentComplete: 35, start: '2006-01-06', finish: '2001-01-31' },
  { id: 7, title: 'Task 8', duration: 50, percentComplete: 40, start: '2006-01-11', finish: '2001-02-04' },
  { id: 8, title: 'Task 9', duration: 55, percentComplete: 45, start: '2007-01-01', finish: '2001-01-31' },
  { id: 9, title: 'Task 10', duration: 65, percentComplete: 50, start: '2001-01-11', finish: '2001-02-04' },
  { id: 10, title: 'Task 11', duration: 70, percentComplete: 55, start: '2001-01-01', finish: '2001-01-31' },
  { id: 11, title: 'Task 12', duration: 75, percentComplete: 60, start: '2001-01-11', finish: '2001-02-04' },
];

}
}

[Phingn]

grid.component.html

<angular-slickgrid gridId="grid1"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset">

[Phingn]

Compiling errors are below
X [ERROR] NG8002: Can't bind to 'dataset' since it isn't a known property of 'angular-slickgrid'.

1. If 'angular-slickgrid' is an Angular component and it has 'dataset' input, then verify that it is included in the '@Component.imports' of this component.

2. If 'angular-slickgrid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component. [plugin angular-compiler]

   src/app/grids/grids.component.html:11:16:
   11 │ [dataset]="dataset">
   ╵ ~~~~~~~~~~~~~~~~~~~

Error occurs in the template of component GridsComponent.

src/app/grids/grids.component.ts:16:15:
  16 │   templateUrl: './grids.component.html',
     ╵                ~~~~~~~~~~~~~~~~~~~~~~~~

[ghiscoding]

I personally never tried the standalone approach so I can't really provide much guidance on the matter (running the Angular 18 upgrade script also didn't remove the app.module that I still have either)... however, I went to Stack Overflow and someone posted today a really detailed answer for Angular 18 that seems to show both approach including a Standalone version, see this SO (there's even a Stackblitz provided)
https://stackoverflow.com/a/78527155/1212166

if you give it a try and it works, please let me know or even better please contribute a PR to update the Quick Start docs with relevant info.

One thing to note in all of this is that AngularSlickgridModule.forRoot() is always needed, I don't fully recall why (maybe because I expose global grid config?) but you'll need it and the SO is detailing how to add it to the standalone version as well.

[Phingn]

Hi @ghiscoding - I saw the example above. Tried but it didn't work. Though the Stackblitz was using app.module.ts and the grid.component wasn't StandAlone

[ghiscoding]

@Phingn there are 2 Stackblitz in his SO answer, you tried the wrong one, the last one is with app module, the one you want to try is further up in the Standalone section.

EDIT

I updated the Quick Start as per the very detailed Stack Overflow answer. Any missing info in the Quick Start guide can be provided via a PR contribution, thanks

[Phingn]

@ghiscoding - Thank you for pointing me the other Stackblitz. Though the codes are the same as I had implemented in my existing project. Let me create a fresh project to see if it works and keep you posted.

[Phingn]

@ghiscoding /@zewa666 - I can confirm that it is working. Thanks both for your time.

[lajith111]

@ghiscoding i have upgraded my app module to standalone (v18)

in app.config i have update

 importProvidersFrom(AngularSlickgridModule.forRoot({
       externalResources: [new ExcelExportService()]
)

But i am getting compile time error

Cannot create an instance of an abstract class.ts(2511)
(alias) abstract new ExcelExportService(): ExcelExportService
import ExcelExportService

iIn compont class it is working fine

this.gridOptions = {
     
      excelExportOptions:{
       sanitizeDataExport: true,
        filename:'AccountReport_'+ new Date().toJSON().slice(0,10),
        exportWithFormatter:true,
      },
       externalResources: [new ExcelExportService()],
  }

[Phingn]

Hi lajith, You need to import both AngularGridInstance and AngularSlickgridModule within the component where the slickGrid is used. Also in your app.config.ts. Use the below instead of your below codes. importProvidersFrom(AngularSlickgridModule.forRoot()) I hope this helps and good luck. Phi

…

________________________________ From: lajith111 ***@***.***> Sent: 23 August 2024 09:32 To: ghiscoding/Angular-Slickgrid ***@***.***> Cc: Phingn ***@***.***>; Mention ***@***.***> Subject: Re: [ghiscoding/Angular-Slickgrid] how to use Angular-Slickgrid as a Standalone Component with Angular 18 (Discussion #1413) @ghiscoding<https://github.com/ghiscoding> i have upgraded my app module to standalone (v18) in app.config i have update importProvidersFrom(AngularSlickgridModule.forRoot({ externalResources: [new ExcelExportService()] ) But i am getting compile time error Cannot create an instance of an abstract class.ts(2511) (alias) abstract new ExcelExportService(): ExcelExportService import ExcelExportService iIn compont class it is working fine this.gridOptions = { excelExportOptions:{ sanitizeDataExport: true, filename:'AccountReport_'+ new Date().toJSON().slice(0,10), exportWithFormatter:true, }, externalResources: [new ExcelExportService()], } — Reply to this email directly, view it on GitHub<#1413 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APFKRU446DCUKVDAZTOR7CTZS3XSFAVCNFSM6AAAAABIHK3DB6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANBSG43TCOA>. You are receiving this because you were mentioned.

[lajith111]

In component class ot is working fine.. only issue with app.config. Not able to register extrrnal service (excel export) in app.config

[Phingn]

Did you use this line of code instead of yours original codes in the app.config.ts? importProvidersFrom(AngularSlickgridModule.forRoot())

…

________________________________ From: lajith111 ***@***.***> Sent: 23 August 2024 14:10 To: ghiscoding/Angular-Slickgrid ***@***.***> Cc: Phingn ***@***.***>; Mention ***@***.***> Subject: Re: [ghiscoding/Angular-Slickgrid] how to use Angular-Slickgrid as a Standalone Component with Angular 18 (Discussion #1413) In component class ot is working fine.. only issue with app.config. Not able to register extrrnal service (excel export) in app.config — Reply to this email directly, view it on GitHub<#1413 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APFKRU4AHF7GEF2GV4ALJ2LZS4YFFAVCNFSM6AAAAABIHK3DB6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANBTGAZTONY>. You are receiving this because you were mentioned.

[lajith111]

Above code is working fine in my app.config

but cant use below importProvidersFrom(AngularSlickgridModule.forRoot({
externalResources: [new ExcelExportService()]
) in app.config

Becuase export service need to defined all compont which uses slickgrid ..if i write in app.config its like global settings