Hello everything is fine? I’m creating a structure for a project that uses Angular 17 (using the dependency injection structure, no longer using app.module), and I would like to use handsontable as a tool to deal with tables, I looked for examples and found this link:
Github Handsontable Angular 17 docs
However, these examples refer to module based configuration, could you show me an example using DI with standalone components?
Currently, we don’t have any examples based on DI, but we may add some in the future. I asked our CTO and he said that there shouldn’t be any problems with such configuration.
thank you very much. When configuring my project, I was unsure about where to place the module registration, considering that I no longer have the modules app:
// register Handsontable's modules
registerAllModules();
Additionally I am receiving this warning:
[WARNING] "@charset" must be the first rule in the file [invalid-@charset]
node_modules/handsontable/dist/handsontable.full.css:2147:0:
2147 │ @charset "UTF-8";I tried to create an example based on DI following the Angular documentation, but it seems that even with this pattern the app.module file is still present. Are you able to share your current implementation on CodeSandbox or StackBlitz?
Hello! Here’s the code:
https://stackblitz.com/~/github.com/pitang-teste/angular-17-handsontable
Based on the tutorial:
First I created the project using the command:
ng new angular-17-handsontable
After that I added the Handsontable, following this tutorial:
Handsontable Docs: Installation in Angular
1° Question:
Moving on to the registerAllModules() step, I placed it in src/app/app.config.ts, however I don’t know if this is the best place (or the correct place) for it. According to the documentation, it would be placed in the app.module.ts.
2° Question
Moving on to the styling part, by following the documentation and placing this line inside my styles.scss
@import ‘~handsontable/dist/handsontable.full.css’;
And the following error occurred :
Could not resolve “~handsontable/dist/handsontable.full.css”
To fix it, I had to change it to:
@import ‘handsontable/dist/handsontable.full.css’;
However, this fix returns the following warnings:
[WARNING] "@charset" must be the first rule in the file [invalid-@charset] node_modules/handsontable/dist/handsontable.full.css:2147:0: 2147 │ @charset "UTF-8";
3° Question
I put the ‘locale’ configuration in src/app/app.config.ts, although it works for the context menu options, it doesn’t work for the numeric type columns. For example, i need to set ‘pt-BR’ currency and the numbers should be like 123.456,789 but instead i get 123,456,789.
I created a basic example in components src/app/components/grid-example, and to summarize the erros i got: the “dropdown” doesn’t fully shows, i got the warnings i mentioned, and the ‘numbro’ library doesn’t work for what i need. And I’m still not sure about the modules registrations at app.config.ts.
Thank you for the example. I managed to solve all the issues you reported, and yes, you can register modules and additional languages in in app.config.ts file.
The issue with CSS errors can be solved by removing the styles declaration from angular.json file and adding import 'handsontable/dist/handsontable.full.css'; directly inside your grid-example.component.ts file.
Problem with currency styling is reported internally in our repository and is present in the newer versions of numbro. In the meantime you can use v. 2.1.2 and formatting will work correctly.
Hello! It works for me, but when i create the build and access the page, the CSS is not applied and the only way that i solved this is by placing the
@import 'handsontable/dist/handsontable.full.css'
in the styles.scss and removing from the grid-example.component.ts.
Is there a way to set the CSS in a global setting, so the following warnings doesn’t apear in the console?
[WARNING] “@charset” must be the first rule in the file [invalid-@charset]
node_modules/handsontable/dist/handsontable.full.css:2147:0:
2147 │ @charset “UTF-8”;
Hi @thiago.lima
This error was caused by defining the styles in the angular.json file. Did you remove the definition from there and declare it just in the component file?