Integration with Angular 2 (Beta 2 now)

Site and Services
1

Hi to all,
I can’t see any sign of attempts/advices/roadmap regarding Angular 2 integration…

I’m trying to build an app with the new Beta 2, as it’s going to be fairly stable now, and see how it compares with Aurelia (that I already love).

And I’d love to try out Webix components, as I really like what I see in your demos, but… I’m completely lost! I have no idea how to glue together the HTML markup initialization and the Angular 2 templating system.

Do you have some early-stage attempt to share, or do you know for sure that it’s not going to work?
If not, do you have some realistic plans on supporting Angular 2? I’m pretty sure you’re already late on the board, as every other major component shop is already providing some support for it…

Thanks!
Paolo

2

+1

3

+1

4

You could do some things using jQuery… for the time being

import {Component, ElementRef, OnInit} from 'angular2/core';
declare var jQuery:any;

var film_set = [{"id":1,"title":"The Shawshank Redemption","year":"1994","votes":"678,79","rating":"9,2","rank":"1"},{"id":2,"title":"The Godfather","year":"1972","votes":"511,495","rating":"9,2","rank":"2"}];


@Component({
    selector: 'jquery-integration',
    template: '<div id="myWebixList"></div>'
})
export class JqueryIntegration implements OnInit {
    elementRef: ElementRef;
    constructor(elementRef: ElementRef) {
        this.elementRef = elementRef;
    }
    ngOnInit() {
        jQuery(this.elementRef.nativeElement).find('#myWebixList').webix_list({
    width:320, height:600,
    template:"#votes# #rank# #title#",
    data:film_set
});
    }
}
5

Yes, that was one of the options…

Now I’m trying something cleaner, without introducing JQuery (I recently abandoned it in favor of vanilla JS, and I don’t regret it).

The solution uses webix markup initialisation in a custom directive. The directive manages events and data binding by reacting to Angular notifications, and manipulating the webix component programmatically.

If I’ll succeed having a stable implementation, I’ll post the results in a gist or public repo to share with others.

6

After exploring custom directives, I can conclude that developing a generic one that emulates HTML markup initialisation is very hard…
My generic directive works well for non-composite components, but has several drawbacks with composite ones, like accordions or toolbars.

BTW, one can use an approach similar to @hozjanmarko’s one without using JQuery (and it’s nearly always the case), like in the following example:

import {Component, ViewChild} from 'angular2/core';

@Component({
  selector: 'doc-header',
  template: '<div #container></div>'
})
export class AppHeader {
  private _webixView: any;
  private _containerId: string;
  @ViewChild('container') private _container: any;

  constructor() {
    this._containerId = '' + webix.uid();
  }

  ngAfterViewInit() {
    this._container.nativeElement.setAttribute('id', this._containerId);
    this._webixView = webix.ui({
      view: 'toolbar',
      container: this._containerId,
      autoheight: true,
      autowidth: true,
      cols: [
        { view:'icon', icon:'bars', width:30, align:'left' },
        { view:'label', label:'Titolo della vista', align:'center' },
        { view:'button', label:'Login', width:100, align:'right' }
      ]
    });
  }
}
7

@nexbit
How would you bind events fired from webix to an output eventemmiter of an angular component?
How would you try to build an webix layout with angular components using the config init?
I’m hot for the topic of combining webix and angular2, but sadly i don’t have enought time for outside projects(this could be a good thing :P) .
I like the way http://valor-software.com/ng2-bootstrap/ has gone implementing their components and i think this could be the right direction for webix.
And sorry for my english, it has become a lithe bit rusty.

8

Unfortunately webix layout components are out of question with the imperative approach used above… I tried hard to use markup initialisation, but it’s too fragile.

Speaking of events it’s not that hard. It’s not shown in my snippet, but you can take an approach similar to the native webix Angular 1 integration, but improved a bit for ng 2.

Basically you need a property that accepts an array of strings, every string is an event name ([‘onitemclick’, …]), and an event emitter that gets fired whenever an event occurs, and that takes as parameter a custom event object that carries the event name and the event arguments.

Whenever the array property changes, you iterate over the elements and run attachEvent on the webix host.

But in the end, I think this components aren’t so much suitable to be used in modern declarative frameworks like Angular 2 and Aurelia, so I’m looking at alternatives…

9

PS: and as a side note, giving that the core team is silently ignoring everything tagged Angular 2 or Aurelia in this forum (that has the same integration issues), speaks by itself…

10

More than 3 months and still now news on Angular 2 support? Or did I miss any post regarding this?