In the documentation there is a reference how to build standalone grid:
// home.component.ts
import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';// import { IGX_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({ selector: 'app-home', template: '<igx-grid [data]="localData" [autoGenerate]="true"></igx-grid>', styleUrls: ['home.component.scss'], standalone: true, imports: [IGX_GRID_DIRECTIVES] /* or imports: [IgxGridComponent] */})export class HomeComponent { public data: Product [];}
But I wasn't being able to find stackblitz project with example that can be run specifically as standalone module. neither I can find references to the files used in the sample .. Can you provide me with either sample project of igx-grid as standalone component or reference where I can find it.
Thanks.
Hello Michael,
Thank you for posting in our community!
I have been looking into your question and the easiest way to generate a standalone component that uses IgxGrid is by using our Ignite UI CLI.
I believe that you will find the following topic quite helpful on the matter:
Getting Started with Ignite UI CLI
Step-by-Step Guide using Ignite UI CLI
Component Templates
Additionally, attached could be found a small sample demonstrating a standalone IgxGrid with a few features enabled. The attached sample is generated with the help of the Ignite UI CLI and by following the step-by-step guide.
Please check out the provided resources and sample and let me know if you need any further information on the matter.
Sincerely, Riva Ivanova Associate Software Developer
3678.standalone-grid.zip
Hello, the project that you provided worked. Thanks
On the other hand I tried to create project with the basic grid as you suggested but it failed .. when I tried to run it :
When I deleted node_modules and tried to rebuild it I've got errors .. I tried to sent you that project with deleted node_modules.. but seems upload does not accept ZIP files .. How can I send it -- should I go to the dedicated support page ? Please let me know .. I need to figure out how to created grids and other components components by using ig new ...
C:\_ngIG\igGridSO>npm installnpm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: @angular/compiler@17.0.9npm ERR! Found: @angular/core@17.2.2npm ERR! node_modules/@angular/corenpm ERR! @angular/core@"^17.0.0" from the root projectnpm ERR! peer @angular/core@"17.2.2" from @angular/animations@17.2.2npm ERR! node_modules/@angular/animationsnpm ERR! @angular/animations@"^17.0.0" from the root projectnpm ERR! peerOptional @angular/animations@"17.2.2" from @angular/platform-browser@17.2.2npm ERR! node_modules/@angular/platform-browsernpm ERR! @angular/platform-browser@"^17.0.0" from the root projectnpm ERR! 3 more (@angular/forms, @angular/platform-browser-dynamic, @angular/router)npm ERR! 1 more (igniteui-angular)npm ERR! 6 more (@angular/common, @angular/forms, ...)npm ERR!npm ERR! Could not resolve dependency:npm ERR! peerOptional @angular/core@"17.0.9" from @angular/compiler@17.0.9npm ERR! node_modules/@angular/compilernpm ERR! @angular/compiler@"^17.0.0" from the root projectnpm ERR! peer @angular/compiler@"17.0.9" from @angular/compiler-cli@17.0.9npm ERR! node_modules/@angular/compiler-clinpm ERR! dev @angular/compiler-cli@"~17.0.0" from the root projectnpm ERR! 2 more (@angular-devkit/build-angular, @ngtools/webpack)npm ERR!npm ERR! Conflicting peer dependency: @angular/core@17.0.9npm ERR! node_modules/@angular/corenpm ERR! peerOptional @angular/core@"17.0.9" from @angular/compiler@17.0.9npm ERR! node_modules/@angular/compilernpm ERR! @angular/compiler@"^17.0.0" from the root projectnpm ERR! peer @angular/compiler@"17.0.9" from @angular/compiler-cli@17.0.9npm ERR! node_modules/@angular/compiler-clinpm ERR! dev @angular/compiler-cli@"~17.0.0" from the root projectnpm ERR! 2 more (@angular-devkit/build-angular, @ngtools/webpack)npm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!npm ERR!npm ERR! For a full report see:npm ERR! C:\Users\gkheysin\AppData\Local\npm-cache\_logs\2024-02-22T17_08_34_971Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: C:\Users\gkheysin\AppData\Local\npm-cache\_logs\2024-02-22T17_08_34_971Z-debug-0.log
never mind 404 .. but still do not understand how come I can not rebuild the project after node_modules deleted .. How to work with that. Thanks.
and also how to send zip files if needed..
All good now?
I am glad I was able to assist you regarding this matter.
Thank you for using Infragistics components.
Regards, Riva Ivanova Associate Software Developer
I tried to upload 4.3 kb file here .. same as yesterday .. did not work... It is just FYI , .. otherwise I have enough to look at right now . Thanks.
Thank you for following up!
I have been looking into your clarifications and what I can say is that the ig new command is used to generate whole new projects, if you would like to generate only components in an Angular application, you could use the ig add command.
To address the following question:
but still do not understand how come I can not rebuild the project after node_modules deleted .. How to work with that. Thanks.
I was not able to reproduce the described behavior on my side and when generating a project, adding a grid, and running the application, the IgxGrid was displayed successfully on the respective URL route. Then, I deleted the node_modules (rm -rf node_modules/), and the package-lock.json file, and installed them again. On my side, everything worked as expected.
Additionally, you could create an Angular project with the standard ng new command and add components with the ng g c (generate component) command. This way you could define the IgxGrid template as desired and not use the predefined ones.
For example:
@Component({ selector: 'app-my-grid ', standalone: true, imports: [IGX_GRID_DIRECTIVES], templateUrl: './my-grid.component.html', styleUrl: './my-grid.component.scss' })
Then, you could define the IgxGrid structure inside the my-grid.component.html file as desired. If any additional components are used inside this html, they should be imported inside the imports array as well. Each import for each component could be found in the respective topic.
To conclude, however you choose to generate a new project or new component, the important part is to include the required imports inside the imports array in order to use the components inside the template.
Also, regarding sending zip files, it is possible to attach them in the forum message, however, there is a 1 MB restriction. The displayed message could be related to the size of the file. Please try uploading the file again and if you continue to experience this behavior, we could proceed to a private support case.
This could be achieved in our Customer Portal Support section here via the New support request button. There you could attach files that are up to 10 MB.
Please test these approaches and let me know if you need any further assistance regarding this matter.