igniteui-angular2 with JQuery

[JiaLiPassion]

This is a general question that igniteui-angular2 still reply on JQuery deeply, so it will be a mix of angular and JQuery.

for example, if I want to handle some events in igTree

the options will look like

this.options = {
            dataSource: this.data,
            bindings: {
                childDataProperty : "ProductSubcategories",
                textKey : "Name",
                valueKey : "ProductCategoryID"
            },
                         selectionChanged: function (evt, ui) {
                              // handle selectionChanged event.
                        },
        };

• Questions

  1. The selectionChanged event will not be attached in angular2 way as @Output such as (click), is that right?

  2. in the selectionChanged event handler, this will not be the Component, but the igTree , is that right? What is the best practice to access the property of component?

  3. in the example, to remove something from tree, the code will look like

    removeSelectedNode(){
        var selected = jQuery('#tree1').igTree('selectedNode');
            if (selected.path !== null) {
                jQuery('#tree1').igTree('removeAt', selected.path);
            } else {
                alert('Select a node from the tree first');
            }
    }

it will remove the DOM, will it also clear data? And how the change detection in angular2 work or in this case, not change detectin tick run at all?

4. is there any plan to remove JQuery at all?

Sorry I am a very new comer for ignite ui, so clarify those basic concepts will help, thank you very much!

[kdinev]

First I should probably give more clarity of the product itself, and then I will answer the specific questions.

Ignite UI is a UI framework based on jQuery UI. The control code base is huge and it reliant on jQuery and jQuery UI. The igniteui-angular2 is an Angular component extension to Ignite UI. The underlying functionality: rendering, interactions, etc. is still handled by the underlying Ignite UI library.

1. selectionChanged as well as all other events are jQuery UI events. They are not Angular event emitters. As we develop the extensions further, we can add Angular event emitters on top of the jQuery UI events, but we haven't done so yet.
2. The context of the event is the element the igTree widget is instantiated on. Any property of the component is essentially an option of the widget, so you can access the options.
3. Methods like remove and removeAt will update both the data and the DOM. So the node you're removing will also be removed from the data, and a new transaction log object will be created in the igTree dataSource, which keeps track of what changes have been performed on the data (new nodes added, as well as removed nodes).
4. This refers to my explanation above. The library is pretty large and at this point we aren't planning to move it away from jQuery. This also has to do with the fact that we provide extensions for other libraries like ReactJS and for other frameworks like AngularJS on top of Ignite UI. If we transition it to native Angular, then we wouldn't be able to do so. :(

However, we also have another component framework that is entirely based on Angular. It's pretty lightweight, but it doesn't offer some of the large controls Ignite UI provides (e.g. Tree). Still, check it out: https://github.com/IgniteUI/igniteui-js-blocks

[JiaLiPassion]

@kdinev , thank you for your detailed reply. It make more sense to me now.

About the questions

The context of the event is the element the igTree widget is instantiated on. Any property of the component is essentially an option of the widget, so you can access the options.

Can you post a sample code to explain this one? you mean if there is a propertyA in Component, I can access it through options just like this.options.propertyA in the eventHandler? is that correct?

Methods like remove and removeAt will update both the data and the DOM. So the node you're removing will also be removed from the data, and a new transaction log object will be created in the igTree dataSource, which keeps track of what changes have been performed on the data (new nodes added, as well as removed nodes).

I see, so which is the recommended way, operate JQuery or modify data in eventHandler? could you provide the best practice from the performance and maybe other perspectives.

and if I remove or add node through JQuery, will it trigger Angular change detection tick?

Thank you for your time!

[kdinev]

@JiaLiPassion About question 1:

selectionChanged: function (evt, ui) {
    // since the context is not the widget but the element
    // you can access the widget from the ui arg
    ui.owner.options.propertyA;
    // here's the API doc 
    // https://www.igniteui.com/help/api/2016.2/ui.igtree#events:selectionChanged 
},

About question 2:

Use the igTree API to modify the DOM and the data:
addNode removeAt removeNodesByValue

Since this also modifies the data object, there is no reason why the Angular change detection wouldn't trigger, but if for some reason it doesn't, then please let me know!

[JiaLiPassion]

@kdinev , Thank you very much. I will try those codes!