title: Angular 4 - Update Meta tags dynamically for Facebook (Open graph)
body: <p>How do we add/update meta tags dynamically so that they get picked by Facebook/Whatsapp share dialog?</p>
  
  <p>I upgraded my angular 2 application to angular 4 in order to use Meta service to add/update meta tags dynamically once we get the data in component from API.</p>
  
  <p>So far in my component, I have</p>
  
  <pre><code>this.metaService.updateTag({ property: 'og:title', content: pageTitle });
  this.metaService.updateTag({ property: 'og:url', 'www.domain.com/page' });
  this.metaService.updateTag({ property: 'og:image', content: coverUrl, itemprop: 'image' });
  this.metaService.updateTag({ property: 'og:image:url', content: coverUrl, itemprop: 'image' });
  this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });
  </code></pre>
  
  <p>I am using updateTag because I have added static tags already with default values. This code successfully updates the meta tags values when I inspect them.</p>
  
  <p>I know it makes sense that Facebook/Whatsapp debugger tools doesn't execute any javascript so it won't ever probably be executed in their environment. </p>
  
  <p>I'm using <code>https://developers.facebook.com/tools/debug/</code> and it always picks up the default tag values which makes sense.</p>
  
  <p>My question is, what is the way around so that Facebook/Whatsapp picks up the updated tag values dynamically? I'm using Angular 4 and loading all data via API calls so its not possible to get any sort of data before the page loads and script is executed.</p>