title: How bind angular component function to google signin button
body: <p>I'm new to angular so please be kind. I have been struggling to figure out how to connect the google signin callback button to my angular component. I'm trying to receive the OAuth token on the client-side in order to send to my back-end but I am unable to get a hold of the response inside my angular component. The obstacle I'm encountering is the inability to have the google button call my angular component function.</p>
  <p>Based on the latest google signin api in order to add a google OAuth button via html you need to do the following. I attempted to do this via their javascript library but wasn't successful.</p>
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;script src=&quot;https://accounts.google.com/gsi/client&quot; async defer&gt;&lt;/script&gt;
      &lt;script&gt; 
      function handleCredentialResponse(e) {
        //e.credential contains the JWT token
      }
      &lt;/script&gt;
      &lt;div id=&quot;g_id_onload&quot;
           data-client_id=&quot;YOUR_CLIENT_ID&quot;
           data-callback=&quot;handleCredentialResponse&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;g_id_signin&quot; data-type=&quot;standard&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I wanted to encapsulate this into a component and get that function called in my component.ts file. So I did the following with <code>onGoogleSignin</code> being a component function.</p>
  <pre><code>&lt;script src=&quot;https://accounts.google.com/gsi/client&quot;&gt;&lt;/script&gt;
  &lt;div    id=&quot;g_id_onload&quot;
          [attr.data-client_id]=&quot;google_login_id&quot;
          [attr.data-callback]=&quot;onGoogleSignIn&quot;&gt;
  &lt;/div&gt;
  &lt;div    class=&quot;g_id_signin&quot; 
          [attr.data-text]=&quot;buttonTxt&quot; 
          [attr.data-theme]=&quot;theme&quot;
  &gt;&lt;/div&gt;
  </code></pre>
  <p>The project compiles and runs but when I run it I get the following issue in the console</p>
  <pre><code>[GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored.
  </code></pre>
  <p>The properties bind no problem but it's the function that doesn't work. So the only hack I have come up with is to put the following in the index.html file</p>
  <pre><code>  &lt;script&gt;
      function onGoogleSignIn(e) {
         console.log(e);
        window.authRef.zone.run(() =&gt; { window.authRef.googleSigninFunction(e); });
      }
    &lt;/script&gt;
  </code></pre>
  <p>Modifying the component.html to not bind to the component function like below:</p>
  <pre><code>&lt;div    id=&quot;g_id_onload&quot;
          [attr.data-client_id]=&quot;google_login_id&quot;
          data-callback=&quot;onGoogleSignIn&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And then put the following into the constructor of my component:</p>
  <pre><code>  constructor(
      private ngZone: NgZone)  {
      window['authRef'] = { component: this, zone: this.ngZone, 
        googleSigninFunction: (e:any) =&gt; this.onGoogleSignin(e), }; 
    }
  </code></pre>
  <p>All of this works but it requires to have a dependency on my component to be outside of my component which is not good practice. I know this is simply because I lack some basic understanding of angular.</p>
  <p>Any help would be greatly appreciated</p>
  <p><strong>UPDATE:</strong></p>
  <p>I did add code on OnInit to inject the code into the DOM programmatically so that it will exist when google needs to bind to it. This allows me to not have to manually add the code into index.html but I'm sure there is a more elegant way to do this.</p>