Including external javascript libraries inside Angularjs 2 component templates

Question

Angularjs 2 documentation mentions,

Almost all HTML syntax is valid template syntax. The <script> element is a notable exception; it is forbidden in order to eliminate any possibility of JavaScript injection attacks (in practice it is simply ignored).

So is there any other way of including external javascript files to a Component template? (like a chart plugin, j3d etc.)

My problem in details..

I have some charts inside a angular2 template(say charts.html). These charts are some what interactive.. They show more details when user move the pointer on the charts. (JQuery based) . Since I am injecting charts to index.html dynamically (with angularjs), those charts plugins doesn't recognizing dynamic content. (even some css properties doesn't apply to the classes of the dynamic contents).

Answer 1

It's not clear to me what you want to do. You can use external javascript files by simply include them into your HTML page. Then you can use them in your components.

That said, you need to be aware that they will probably be executed outside the context of Angular2. I mean they won't take into account regarding change detection. As a matter of fact, Angular2 uses ZoneJS to trigger the change detection. Here are two questions regarding this aspect:

• What is the Angular2 equivalent to an AngularJS $watch? - Mark Rajcok describes in-depth the way ZonesJS are used and the link with change detection
• View is not updated on change in Angular2 - Both Günter Zöchbauer and alexpods describe how to fix a ZoneJS problem when integrating the Mousetrap external library into Angular2

Here is another question describing how to use toastr into Angular2: Unable to import toastr module with Angular 2.

Another thing to consider is if your external library supports modules or not to be able to reference it using a require or an import.

Edit

Regarding CSS, components support shadow DOM. This means that their styles are isolated. So you need to define CSS styles into the component (styles property) or change the encapsulation mode to ViewEncapsulation.None.

Regarding user move supports, you need to listen to them by your own in your component and execute corresponding processing using NgZone to be able to take part in the change detection. You could have a look at this question:

• ngModel updates in controller, but not in the view, angular 2

Hope it helps you, Thierry