title: How to use script tag in Angular 5 component template
body: <p>I was recently creating a web application using Angular 5.</p>
  
  <p>I have built most of the thing but when I was required to add a <code>&lt;script&gt;</code> in my component template the code didn't work at compile time.</p>
  
  <p>Can anybody suggest a solution?</p>
  
  <p><strong>html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;section class="col span-2-of-6 ads"&gt;
      &lt;div [innerHtml]="html | safe: 'html'" &gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>component</strong></p>
  
  <pre><code>html : string = "&lt;script type='text/javascript' language='javascript' src=''&gt;&lt;/script&gt;";     //ads js src in src=""
  </code></pre>
  
  <p><strong>safe.pipe.ts</strong></p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
  
  @Pipe({
    name: 'safe'
  })
  export class SafePipe implements PipeTransform {
  
    constructor(protected sanitizer: DomSanitizer) {}
  
    public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
      switch (type) {
        case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
        case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
        case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
        case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
        case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
        default: throw new Error(`Invalid safe type specified: ${type}`);
      }
    }
  }
  </code></pre>
  
  <p>When I used the developer options in Chrome, I found that <code>display</code> is <code>none</code> in the template component.</p>
  
  <pre class="lang-css prettyprint-override"><code>script {                       user agent stylesheet
      display: none;
  }
  </code></pre>