embedded Twitter widget on Angular 2+ app only shows up on the first page load

Question

My app works perfectly if I copy exactly the built-in function from Twitter docs (https://dev.twitter.com/web/javascript/loading) into ngAfterViewInit function, but when I s

Answer 1

Okay, I found a way to work around based on this reference (Why will my twitter widget not render if i change the view in angularjs?). No need for event subscription, I need to wrap the function into setTimeOut to re-render it between route switch. Remember to also wrap the setTimeOut function inside isPlatformBrowser for a better practice of pre-rendering. Here is the code:

import { Component, OnInit, OnDestroy, AfterViewInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: Object) { }

ngAfterViewInit() {    
 if (isPlatformBrowser(this.platformId)) {
  setTimeout(function() { 
    (window).twttr = (function(d, s, id) {
      let js, fjs = d.getElementsByTagName(s)[0],
        t = (window).twttr || {};
      if (d.getElementById(id)) return t;
      js = d.createElement(s);
      js.id = id;
      js.src = 'https://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js, fjs);

      t._e = [];
      t.ready = function(f) {
        t._e.push(f);
      };

      return t;
    }(document, 'script', 'twitter-wjs'));
    (window).twttr.widgets.load(); }, 100);
  }
}