Dynamically loading twitter-feed in angular

Question

I am using embedding twitter feed widget by twitter which simply requires to use a script tag

        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

and the html tag like on the page. This works fine. However, for my case the url comes from server side. This does not work for me as it seems that by the time html tag renders the url value is not available from server side.

and when it's available the twitter widget does not refresh to take the new url.

the a tag looks like below

 <a class="twitter-timeline" [href]="core.twitterFeed">Twitter Feed</a>

how to make it work by waiting for this to fire? I have tried doing something like below but that does not work


    <mat-card-content *ngIf="core.twitterFeed != undefined">
        <a class="twitter-timeline" [href]="core.twitterFeed">Twitter Feed</a>

    </mat-card-content>

Possible duplicate of [Embedding twitter timeline does not render in angular 7](https://stackoverflow.com/questions/56574072/embedding-twitter-timeline-does-not-render-in-angular-7) — Douglas P., Jun 21 '19 at 19:42

score 0 · Answer 1 · answered Jun 21 '19 at 17:11

0

You could try to subscribe to the router's events and set a flag to true when the URL meets your condition

isBrowser = false;

ngOnInit() {
this.subscription = router.events.subscribe(e => {
    if(e instanceof NavigationEnd){
      this.isBrowser = true;
    }
  });
}

and use this flag to display your element

<mat-card-content *ngIf="isBrowser">
    <a class="twitter-timeline" [href]="core.twitterFeed">Twitter Feed</a>
</mat-card-content>

answered Jun 21 '19 at 17:11

Douglas P.

560
4
19

whats this.subscription here? just a random variable like isBrowser ? – Moblize IT Jun 21 '19 at 17:14
i tried chaning this.subscription to let subscription but that way it does not work – Moblize IT Jun 21 '19 at 17:22
You can remove subscription there and it will work but it's a good practice to always unsubscribe to all subscriptions to avoid a memory leak. If you want to unsubscribe just add `this subscriptions.unsubscribe();` to your` ngOnDestroy` method. By the way, `this.subscription` is of type `Subscription` – Douglas P. Jun 21 '19 at 17:39
This solution does not work. My twitter feed does not render or refresh – Moblize IT Jun 21 '19 at 17:45
Can you reproduce your issue in a stackblitz? If so, it might be easier to understand what's going on. – Douglas P. Jun 21 '19 at 18:43

Dynamically loading twitter-feed in angular

1 Answers1