Does not render instagram, twitter and other embedded in angular

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

将<script async src="//www.instagram.com/embed.js"></script>替换为<script async src="https://www.instagram.com/embed.js"></script>并将此行代码移至index.html头部