how to add angular slickgrid provider within the standalone component for latest angular version

[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.

[ghiscoding]

There's a complete and working demo of a Standalone in the Stack Overflow I posted above. I assume you didn't read/try it yet because it really has all the answers and also includes a working Stackblitz (though you need to follow his install instruction to get it running, I did try it and it works).

For the future please provide either a Stackblitz or create a new GitHub repo to provide a more portable repro.

[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.