title: How to load a 3rd party script from web dynamically into Angular2 component
body: <p>I am trying to load a 3rd party script from web, instead of making a local copy of it and be able to use the 3rd party script's global variables and functions after the script loads.</p>
  
  <p><strong>Update</strong>:</p>
  
  <ul>
  <li>Here is an example of what I am trying to achieve in plain JavaScript where clicking on Visa Checkout button opens Visa Checkout dialog:
  <a href="https://plnkr.co/edit/weV9QPttZ2OPXe6k0Xy8?p=preview" rel="noreferrer">Plunker JS link</a></li>
  <li>Here is the Angular2 version of it where I need help:
  <a href="https://plnkr.co/edit/mMadQyEbi9arVslXXh6K?p=preview" rel="noreferrer">Plunker Angular2 link</a></li>
  </ul>
  
  <p>Issue: Component below is not loading the script from web
  <div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component} from '@angular/core'
  
  @Component({
    selector: 'custom',
    providers: [],
    template: `
      &lt;div&gt;
        &lt;h2&gt;{{name}}&lt;/h2&gt;
        &lt;img class="v-button" role="button" alt="Visa Checkout" src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png"&gt;
        &lt;script src="https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js"&gt;
  &lt;/script&gt;
      &lt;/div&gt;
    `
  })
  export class CustomComponent {
    constructor() {
      this.name = 'Custom Component works!!'
    }
  }</code></pre>
  </div>
  </div>
  </p>