title: Angular 5 callback and that=this
body: <p>in my Angular 5 project I have some problems with the callback from an external library. I load it using</p>
  
  <pre><code>&lt;script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="my-site"&gt; &lt;/script&gt;
  </code></pre>
  
  <p>and then in Angular I import it as follows:</p>
  
  <pre><code>declare var Chargebee: any;
  Chargebee.init({site: "my-site"});
  </code></pre>
  
  <p>I also have a public variable in my component, lets say <code>publicVar</code>, which I am displaying in the template.</p>
  
  <pre><code>publicVar: string = 'before checkout';
  </code></pre>
  
  <p>I have the following method:</p>
  
  <pre><code>subscribeToPlan() {
    var _self = this;
    var chargebeeInstance = Chargebee.getInstance();
  
    chargebeeInstance.openCheckout({
      hostedPage: function() {
        _self.publicVar = 'hosted-page';
        console.log('hosted-page');
      },
      success: function(hostedPageId) {
        _self.publicVar = 'success';
        console.log('success');
      },
      close: function() {
        _self.publicVar = 'closed';
        console.log('closed');
      }
    });
  }
  </code></pre>
  
  <p>What is happening when I run the code?</p>
  
  <p>All the <code>console.log</code> functions output the correct data, so I know the chargebee callbacks are called. However, only <code>hostedPage: function() {}</code> correctly changes my <code>publicVar</code>, and it says "hosted-page" in my template.</p>
  
  <p><code>success: function(){}</code> nor <code>close: function(){}</code> won't update the <code>publicVar</code> in my template. I suspect because these are, unlike the  <code>hostedPage</code>, a callback methods and the <code>self.</code> in them has wrong context?</p>