Need to insert Script tag in angular 2

Question

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.

Answer 1

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>