title: Update meta tags in angular universal with external API call
body: <p>I've spent more than 2 months but could not found a clear solution of how to proceed with angular universal.
  I've already spent about 6 months in implementing angular universal on a project for which I don't get a much time and now I'm stuck with this issue. Can anyone help me with this as it seems the whole world want to know a solution for Angular SSR.</p>
  
  <p>Here's my code(Meta tag service):</p>
  
  <pre class="lang-js prettyprint-override"><code>import {Injectable} from '@angular/core';
  import { Meta, Title } from '@angular/platform-browser';
  import {commonMetas} from './meta-data.model';
  
  @Injectable()
  export class SeoService {
      public commonMetas = commonMetas;
      constructor(public meta: Meta, public title: Title) {}
  
      setAutomatically (key = 'none') {
          const detail = this.commonMetas[key];
          /** setting defaults */
          this.setTitle(detail.title);
          this.setAuthor();
          this.setDescription(detail.description);
          this.setKeywords(detail.keyword);
      }
      setFromJson(key: {
          title: any,
          description: any,
          image: any,
          keyword: any,
          author: any
      }) {
          key.title = key.title ? key.title : this.commonMetas['none'].title;
          key.description = key.description ? key.description : this.commonMetas['none'].description;
  
      }
      setTitle(titleToSet = '') {
          this.title.setTitle(titleToSet);
      }
      setAuthor (nameToSet = '') {
          this.meta.addTag({ name: 'author',   content: 'havemybooks.com'});
      }
      setKeywords (keyword = '') {
          this.meta.addTag({ name: 'keywords', content: keyword});
      }
      }
  }
  </code></pre>
  
  
  
  <p>And my component.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>  ngOnInit() {
      this.sub = this.route.params.subscribe(params =&gt; {
        this.id = +params['id'];
        this.api.getParticular({id: this.id}).subscribe((response) =&gt; {
          this.content = response.blog_data[0];
          this.content.main_image = this.getImage(this.content.main_image);
          this.content.metaCreatedAt = moment(this.content.created_at).format('YYYY-MM-DD');
          this.content.displayCreatedAt = moment.utc(new Date(this.content.created_at)).fromNow();
          this.content.name = this.handleName(this.content.name);
          this.seo.setFromJson({
            title: this.content.title,
            image: this.content.main_image,
            description: this.content.blog,
            author: this.content.name,
            keyword: ''
          });
        });
     });
    }
  </code></pre>
  
  
  
  <p>Here are some linked StackOverflow questions and GitHub issues:</p>
  
  <p><a href="https://stackoverflow.com/questions/49169175/angular-universal-server-side-rendering-meta-tags">Angular universal Server Side Rendering, Meta tags</a></p>
  
  <p><a href="https://stackoverflow.com/questions/49437166/updating-meta-tags-for-seo-using-angular-universal">Updating meta tags for SEO using angular universal</a></p>
  
  <p><a href="https://stackoverflow.com/questions/40241355/angular-universal-external-api">Angular Universal + External API</a></p>
  
  <p><a href="https://github.com/fulls1z3/ngx-meta/issues/101" rel="noreferrer">https://github.com/fulls1z3/ngx-meta/issues/101</a></p>
  
  <p><a href="https://stackoverflow.com/questions/48704717/angular-universal-og-meta-tags-not-working-with-child-routes">Angular Universal - OG meta tags not working with child routes</a></p>
  
  <p><a href="https://github.com/fulls1z3/ngx-meta/issues/118(I" rel="noreferrer">https://github.com/fulls1z3/ngx-meta/issues/118(I</a> tried to get help here from someone who successfully implemented but got no help)</p>
  
  <p><a href="https://github.com/maciejtreder/ng-toolkit/issues/460" rel="noreferrer">https://github.com/maciejtreder/ng-toolkit/issues/460</a> (I opened it)</p>
  
  <p>The list goes on I've seen a number of discussions which were never concluded. Anyone who can suggest how to make an API call before rendering in ng-express.</p>
  
  <p>I have implemented SSR and use ngx-meta tag but still, fb crawler shows the default meta tags I used in the head tag.</p>
  
  <blockquote>
    <p>UPDATE: I'm able to get the source updated with view source option in
    chrome but the Facebook and Google crawler show the default meta tags
    which are there by default. It's very tough to launch my website with
    it remaining any help is appreciated. @Brandon guided me a lot I spent
    quite some time on implementing node with Jade and Nunchucks but since
    angular universal use angular-express by default so I wasn't able to
    use the above-mentioned render engines.</p>
  </blockquote>
  
  <p>So is there a way to render meta tags using ng express engine.</p>
  
  <p>Like this <code>&lt;title&gt;{{meta.title}}&lt;/title&gt;...</code></p>