Menu
I've already done a bit of reading and searching and pretty much everything I find points to that a script tag cannot be included in a template in Angular 2.
we are removing tags from templates on purpose as you shouldn't use those to load code on demand. https://github.com/angular/angular/issues/4903 [2015]
However - there is a function bypassSecurityTrustScript
I'd like to know when and how bypassSecurityTrustScript in Angular 2 is intended to be used?
I know a similar question has been asked: Angular2 dynamically insert script tag - though no one answered their question of how to use bypassSecurityTrustScript, and I'm not sure how the provided answer to that question could even work as it appears to use JavaScript within a template.
874
In angular we can add those script in two ways first one is using the pure javascript way and other in angular way which also work on server application.
Using the script tag to include an external JavaScript file You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
Multiple <SCRIPT> Tags Up to this point all of the JavaScript Code was in one <SCRIPT> tag, this does not need to be the case. You can have as many <SCRIPT></SCRIPT> tags as you would like in a document.
To include a JavaScript library in your TypeScript application you must first include it in your HTML file as a script tag. To use the library you must add the following to one of your ts files: declare var libraryVar: any; Replace libraryVar with a variable, function, or class within your JavaScript library.
Having scripts in your views is usually a bad practice. If you insist on doing this you can use this component:
scripthack.component.html:
<div #script style.display="none"> <ng-content></ng-content> </div> scripthack.component.ts:
import { Component, ElementRef, ViewChild, Input } from '@angular/core'; @Component({ selector: 'script-hack', templateUrl: './scripthack.component.html' }) export class ScriptHackComponent { @Input() src: string; @Input() type: string; @ViewChild('script') script: ElementRef; convertToScript() { var element = this.script.nativeElement; var script = document.createElement("script"); script.type = this.type ? this.type : "text/javascript"; if (this.src) { script.src = this.src; } if (element.innerHTML) { script.innerHTML = element.innerHTML; } var parent = element.parentElement; parent.parentElement.replaceChild(script, parent); } ngAfterViewInit() { this.convertToScript(); } } usage (inline):
<script-hack>alert('hoi');</script-hack> usage (external):
<script-hack src="//platform.twitter.com/widgets.js" type="text/javascript"></script-hack> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
