Need to insert Script tag in angular 2

Question

I already read and searched a bit, and almost everything I find indicates that the script tag cannot be included in the template in Angular 2.

we specifically remove tags from templates, as you should not use them to download code on demand. https://github.com/angular/angular/issues/4903 [2015]

However - there is a bypassSecurityTrustScript function

I would like to know when and how bypassSecurityTrustScript in Angular 2 is supposed to be used?

I know that a similar question was asked: Angular2 dynamically insert a script tag , although no one answered their question about how to use bypassSecurityTrustScript , and I'm not sure how the provided answer to this question may even work, since it seems to be Uses JavaScript in the template.

Answer 1

Having scripts in your views is usually bad practice. If you insist on 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(); } } 

use (inline):

 <script-hack>alert('hoi');</script-hack> 

use (external):

 <script-hack src="//platform.twitter.com/widgets.js" type="text/javascript"></script-hack> 

Answer 2

Turns out I thought about it a little wrong. I tried to find a way to put a script in a template using the standard Angular template variables. When Angular fills the template, it clears the values ​​and the script tags are lost.

I finally managed to get the script tags in the following article: https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90#.7njysc6z1

After that, I had a problem described as follows: Angular2 dynamically inserts a script tag

Then I moved the logic to a component class based on this: Where does the DOM manipulation in Angular 2 apply?

Answer 3

I had a similar use case where I don't know if the HTML will contain a script tag. Since HTML5 does not execute the script, if it is part of the innerHTML destination, I used a slightly different approach.
This is part of the plugin system, so I needed to add html + scripts on demand.

Source here - https://github.com/savantly-net/sprout-platform/blob/development/web/sprout-web-ui/src/app/dynamic/dynamic.component.ts

 import { Component, Input, AfterViewInit, ViewChild, Directive, ElementRef } from '@angular/core'; @Directive({ /* tslint:disable-next-line:directive-selector */ selector: 'dynamic-directive' }) export class DynamicDirective {} @Component({ template: `<dynamic-directive></dynamic-directive>` }) export class DynamicComponent implements AfterViewInit { @Input() body: any; @ViewChild(DynamicDirective, {read: ElementRef}) dynamic: ElementRef; constructor() { } // loads all the html from the plugin, but removes the script tags and appends them individually, // since html will not execute them if they are part of the innerHTML ngAfterViewInit(): void { const div = document.createElement('div'); div.innerHTML = this.body; const scriptElements = []; const scriptNodes = div.querySelectorAll('script'); for (let i = 0; i < scriptNodes.length; i++) { const scriptNode = scriptNodes[i]; // Create a new script element so HTML5 will execute it upon adding to DOM const scriptElement = document.createElement('script'); // Copy all the attributes from the original script element for (let aI = 0; aI < scriptNode.attributes.length; aI++) { scriptElement.attributes.setNamedItem(<Attr>scriptNode.attributes[aI].cloneNode()); } // Add any content the original script element has const scriptContent = document.createTextNode(scriptNode.textContent); scriptElement.appendChild(scriptContent); // Remove the original script element scriptNode.remove(); // add the new element to the list scriptElements.push(scriptElement); } this.dynamic.nativeElement.appendChild(div); // Finally add the new script elements to the DOM for (let i = 0; i < scriptElements.length; i++) { this.dynamic.nativeElement.appendChild(scriptElements[i]); } } } 

Answer 4

According to the Angular documentation, the & lt; script script & gt; The item is prohibited and cannot be used in templates. & Lt; & script GT; ignored when used in templates.

Check here. Corner safety

Answer 5

Include jQuery in your JavaScript console

Use the following to solve your problem. It includes jQuery by embedding script tags in the DOM, but it can work for any tag library or JavaScript you wish. Optionally, you can use the innerHTML attribute to customize the contents of the tag.