Wrappers for Suite Components from an AngularJS Fan

| Comments (3)

Emanuil Glavchev made an important contribution that many dhtmlx users were looking for. He has created wrappers for some of the DHTMLX library controls that enables using it with AngularJS Framework. So, most popular Suite controls, such as Grid, Tree, Layout, Form and more other can be now easily used in your Angular + DHTMLX projects.


Continue reading to learn about Emanuil’s contribution and the work he has done.

“What these directives represent are the wrappers for some of the DHTMLX components. As I require more of them I add more to the project. Each directive provides an interface to the underlying dhtmlx components. That interface in most cases does not encompass the complete API. I’ve handled the issue in 2 ways: one is letting the directive user get access to the underlying object at important times in its lifetime (in order to manually configure it additionally, or manipulate its data), whereas another way is registering the object in the controller scope usually via the dhxObj/dhx-obj attribute.

Find the described wrappers on GitHub

Despite that, I try to include in the directives interface all that I’m likely going to need most of the time. This is done because I mostly use DHTMLX+Angular.js for fast creation of prototype web applications, and it is really much easier when a component can be fully defined in the template without requiring additional code configuration in the controller other than attaching the actual data, which for prototyping purposes can also be often inlined in the template.

I’ve tried to add comments where absolutely necessary, however usually I stick quite close to the actual DHTMLX Api of the underlying components, which means of course you need to have DHTMLX handy. I find it important that for each directive, a demo exists in this application. This serves 2 purposes.

First it serves as a sort of environment in which all the directives can be easily tested. Secondly, the very application showcases the directive code, as well as the actual demo code that gets executed before one’s eyes. That makes the demo app not only into a testing environment, but also a sort of handbook, to which I often refer to remember how the directives are used. Naturally, as I add more directives or expand the functionality of the existing ones, I will update the demos accordingly to reflect this new functionality.

Final Note: Not being a professional Javascript/Angular.js developer, I do not claim to follow completely the established good principles of design, functionality and codestyle, but always remain open to correction and improvement. If anyone feels like they have something to add to any part of this and they want to share their knowhow, they will be most welcome.”

Note that to use it in commercial projects, you need to obtain appropriate license.

We want to thank Emanuil Glavchev one more time. You may find Angular+DHTMLX demos here. You are welcome to leave your comments and suggestions!



  1. Robert March 17, 2016 at 1:43 pm

    Great job! Need to check it for my future projects.

  2. Nathan July 21, 2016 at 1:34 am

    Question: Why is this for angular1 when angular2 is already in RC4? Angular 1 is obsolete for new projects.

    I cannot figure out how to get DHTML to work with Angular2 and Typescript using Webpack build system. Very strange that it exposes the whole service on the window object with window.dhx = I don’t like that.

    dhtmlxSuite should be released in CommonJS format so that developers who use module bundlers like Webpack or Browserify can easily integrate the needed modules from the suite into their project. It should be exported as a CommonJS module, not attached to the window. Please consider this on your next version of the software

  3. Nid January 3, 2017 at 11:16 am

    DHTMLx is for “enter-price” projects. For them, Angular2 is too bleeding edge.

Leave a Reply