CODEWITHSUNDEEP
javascriptangular
G. Vega
G. Vega

Reputation: 78

Does not render instagram, twitter and other embedded in angular

I am trying to show content from instagram, twitter and other libraries that allow embedding in sites. The problem that I have is that it only renders the embedded content the first time and then when I go back to the same content the embed is not rendered again. :(

This is an example of what happens to me: https://stackblitz.com/edit/angular-vcv94j (I add the library js in index.html)

I am located in test-1 the embedded content renders and when I go to test-2 the embedded content does not render

What solution could be given to this problem...? :S

Is there any way to trigger the events of the javascript libraries again?

Upvotes: 1

Views: 3053

Answers (3)

Subhod I
Subhod I

Reputation: 182

replace <script async src="//www.instagram.com/embed.js"></script> with <script async src="https://www.instagram.com/embed.js"></script> and move this line of code to index.html head section

Upvotes: 1

Hero Wanders
Hero Wanders

Reputation: 3292

You are including Instagram's embed.js which searches for certain elements in the DOM and replaces them by iframe elements which embed the post.

The script offers a global variable called instgrm which allows access to 

instgrm.Embeds.process()

which repeats that search. You may call this each time your component has rendered.

I have forked your example and modified it accordingly, following two different approaches:

  1. Calling a service from the components
  2. Using a directive for elements with a data-instgrm-permalink attribute

Upvotes: 5

Matheus Dal&#39;Pizzol
Matheus Dal&#39;Pizzol

Reputation: 6105

If you're loading content dynamically (AJAX, for example), these embed services usually have a JavaScript API method that you need to call after inserting the contents into the page in order to render the posts.

Instagram, for example, have the window.instgrm.Embeds.process(), Facebook have FB.XFBML.parse();.

You will find something similar for Twitter and other social media embeds.

Upvotes: 3

Related Questions