Render angular2 Component from javascript and get html in return

Question

Is there a way to execute angular2 component from JavaScript and get generated HTML in return?

I would like to write a function in plain JavaScript/JQUERY which should execute angular2 component and returns generated HTML.

For example: something like

var html = executeAngular2ComponentAndReturnHtml('componentName');

Any help will be highly appreciated.

Thanks

Why? Why do you want to write the function in plain JS if you already have angular? — Dinistro, Jan 30 '17 at 07:36
i basically want to write a wrapper around angular2 application, wrapper can be included by the user from cdn and can be used easily. — Asad Ullah, Jan 30 '17 at 08:58

score 0 · Answer 1 · edited May 23 '17 at 11:54

You can use the innerHTML attribute to do that. Bind it to a property of your component class like this:

<div [innerHTML]="customHtml">  // note the casing of innerHTML.
</div>

In your Component code:

this.customHtml = executeAngular2ComponentAndReturnHtml('componentName');

Important: You may also want to mark your HTML as trusted so that Angular2's DOM sanitizer does not remove parts of it. For this, please see angular 2 html binding

Render angular2 Component from javascript and get html in return

1 Answers1