Problem integrating suite with Angular 11


#1

First, let me tell you that I was an avid DHTMLX user from the very beginning until version 5, I’ve developed a ton of projects using DHTMLX, and loved it. Then, I switch to a job that did not allow me to choose my dev tools, thankfully those days are gone, but on my current job I had to pick up Angular, so I did. Today I’ve looked at DHTMLX site and saw that there is an integration with Angular available. So, I’ve downloaded the repo at https://github.com/DHTMLX/angular-suite-demo, tried to install it and then run it - no go, - quite a few vulnerabilities that CLI threw at me. I still wanted to try it. So, grabbed the whole thing from node_modules and threw it in my project. All I need is one widget - “Window”, I need a good-looking modal window that I can control with positioning and resizing, the bootstrap modal window is a pain to control. So I grabbed the sample code that was in the repo, for the component, it works, but for some reason, the styles are not applied to the window, so it would come up like that.

so you see that the header is completely out of wack, although all the functionality is there. I can resize, position, and drag it. I tried to include the path to suite.css file in index.html - no dice, tried to put the whole thing in the components.css file - the same thing. I know there is something missing. Unfortunately, I’m no Angular pro, this is my very first project, I’m maybe the month in on it, so any suggestion would help me tremendously.
Please, give me a hint.


#2

Hello Igor.

Coul you please, provide your actual complete demo, so I could check it and suggest a probable solution.


#3

I’ve created a codesandbox, this is my first one, so let me know if you can’t see it https://codesandbox.io/s/wonderful-ishizaka-48bil


#4

My apologies for the long delay with the reply.
In your app.component.ts please, try to add the suite css styles also:

//in string #3
import "dhx-suite/codebase/suite.min.css";

#5

Thank you very much, огромное спасибо и labai ačiū.
One more question, though, what about different themes, how do I apply different themes?


#6

unfortunaetly we have no themes in the dhtmlxSuite. You may try to create the css templates for your using components to apply the custom styles. LIke here:
https://dhtmlx.com/docs/products/dhtmlxSuite/how-to-create-javascript-applications