1

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).

Chathura Widanage
  • 653
  • 5
  • 14
  • I tried including the required files in the index.html it self, but they are not dynamically triggering when templates are injected. – Chathura Widanage Jan 28 '16 at 11:20
  • What is the link of the documentation you quoted in your question? Just to have the context... Thanks! – Thierry Templier Jan 28 '16 at 12:07
  • @ThierryTemplier https://angular.io/docs/ts/latest/guide/template-syntax.html – Chathura Widanage Jan 28 '16 at 14:17
  • in fact the script element was displayed in your question ;-) Just edited this. In fact, this remark is only for the component templates but not for the HTML entry point file... So external JS files must be included in this file. Hope it makes sense. – Thierry Templier Jan 28 '16 at 14:20

1 Answers1

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:

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:

Hope it helps you, Thierry

Community
  • 1
  • 1
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • Thank for taking your time to help me. Let me explain my problem little bit more. 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). – Chathura Widanage Jan 28 '16 at 14:21
  • 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` – Thierry Templier Jan 28 '16 at 14:27
  • 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: http://stackoverflow.com/questions/34808730/ngmodel-updates-in-controller-but-not-in-the-view-angular-2/34808869#34808869 – Thierry Templier Jan 28 '16 at 14:28
  • Hope it gives you more hints. Feel free to update your question with what you provided to me in comments. – Thierry Templier Jan 28 '16 at 14:29
  • How ever most of the javascript libraries(having inbuilt listeners binded to ids or classes) doesn't work yet. :-( – Chathura Widanage Jan 29 '16 at 06:34
  • Do you want a precise sample? What do you mean by "doesn't work yet"? – Thierry Templier Jan 29 '16 at 06:37
  • just assume I have a data picker library, it finds all the elements having class .datepicker and binds a listener to the input, so when user click on that a widget pops up. Now I have included datepicker library in index.html and inject templates(which contains elements) using angular2. In this case date picker doesn't work as expected. (Consider this as just an example, I want to use a commercial web template which has over 30 such libraries to populate charts, widgets etc.) – Chathura Widanage Jan 29 '16 at 06:43