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: (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?

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./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?

• javascript
• angular

3 Answers 3

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 ponent has rendered.

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

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

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.

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