Inserting angular2 component into native DOM

Question

I'm using DHTMLX library for windows system in my application.

In Angular1 I did something like this:

var windows = new dhtmlXWindows();
var wnd = windows.createWindow();
var new_scope = $rootScope.$new();
var content_dom = angular.element($compile('<div>Content</div>')(new_scope))[0];
wnd.attachObject(content_dom);

Is it possible to do the same in Angular2? I guess I should work with DynamicComponentLoader and loadIntoLocation, but i don't understand what should I put into loadIntoLocation function's parametres hostLocation and anchorName.

Günter Zöchbauer · Accepted Answer · 2015-12-09 10:44:30Z

1

I found this solution. It works, but I'm not sure is it correct to do this.

@Component({
    selector: 'app',
    template: `
      <div #windows></div>
    `
})
class EnviromentComponent {}

var app = bootstrap(EnviromentComponent);

app.then(function (componentRef) {
    var dynamicComponentLoader:DynamicComponentLoader = componentRef.injector.get(DynamicComponentLoader);

    dynamicComponentLoader.loadIntoLocation(MyComponent, componentRef.location, 'windows').then(function(elementRef) {
        var wnd = new dhtmlXWindows();
        wnd.attachObject(elementRef.location.nativeElement);
  });
});

edited Dec 9, 2015 at 10:44

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

answered Dec 9, 2015 at 10:02

Viktar K

1,5582 gold badges16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Inserting angular2 component into native DOM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related