title: Google reCaptcha not showing in Angular 2 app
body: <p>I am trying to use Google reCaptcha in an Angular 2 app.  Set up as described in the documentation, the reCaptcha dialog will display if the g-recaptcha tag is in the main HTML page, but will not show if in any components (whether it's the main app component, a sub component etc.)</p>
  
  <p>This reCaptcha works fine</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="g-recaptcha" data-sitekey="your_site_key"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>But the following will not show</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="g-recaptcha" data-sitekey="your_site_key"&gt;&lt;/div&gt;
    `,
  })
  </code></pre>
  
  <p>I can see in Chrome's developer tools that when the reCaptcha is present in the HTML, it has valid dimensions (654x78)</p>
  
  <p><a href="https://i.stack.imgur.com/wcV0f.png" rel="nofollow"><img src="https://i.stack.imgur.com/wcV0f.png" alt="enter image description here"></a></p>
  
  <p>But when rendered in the component the dimensions are not valid (654x0).</p>
  
  <p><a href="https://i.stack.imgur.com/S69UV.png" rel="nofollow"><img src="https://i.stack.imgur.com/S69UV.png" alt="enter image description here"></a></p>
  
  <p>I have a Plunker showing the issue here - <a href="https://plnkr.co/edoI5Hiydkfwiyggps3e" rel="nofollow">https://plnkr.co/edoI5Hiydkfwiyggps3e</a></p>
  
  <p>I have tried adding my own CSS class to the div, increasing the height but still nothing shows.  I have also tried various CSS styles to try and transform the div, as well as setting the compact style.</p>
  
  <p>There is no output in the console regarding any errors or any indication of what is being modified.</p>
  
  <p>Any ideas what in Angular 2 might be causing the properties to go awry?</p>
  
  <p>Thanks</p>