Iframe not loading inside Angular variable

Question

I have an Angular news webapp. It loads the data for the each news article from backend. The data is HTML data which may contain all the HTML tags, and among other things iframes.

The problem I am facing is that when an iframe is loaded, it doesn't load in the browser. When I put the same iframe directly to the html it works. But, when I load it from the backend, and use as Angular variable in HTML, it doesn't work.

I use it inside the HTML like this:


            {{news.textDown}}

Inside news.textDown is a html containing the iframe.

All the other HTML content gets loaded succesfully, just the iframe is never displayed. But, when I check it in Developer tools, everything seems to load just fine.

What I see in the Network tab is that the request is being sent to youtube every 10 miliseconds but is for some reason always canceled.

It seems to me like Angular is reloading every N miliseconds and doesn't let iframe to load. How can I prevent this ?

EDIT: Now, after further inspection, I actaully see that the youtube content inside the iframe actaully loads, it's just that it keeps refreshing all the time, so that's why it sometimes dissapera.

I'm providing more info to make it more easy to understand.

This is all the code that loads the article from backend. This is the article that contains the iframe:

ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.newsId = params['id'];
      console.log('news: ' + this.newsId);

      this.loadNewsArticle().subscribe(response => {
      });
    });
  }

  loadNewsArticle() {
    return new Observable((observer) => {
      this.apiSvc.apiCall('get', 'news', [this.newsId.toString()], {}).subscribe(response => {
        if (response.code !== 0) {
          console.log('An error has occured while calling the API /news');
          // throw error(response.message);
          return observer.error();
        } else {
          this.news = response.data;
          this.ref.detectChanges();
          return observer.next(response);
        }
      });
    });
  }

And it's loaded into the HTML using the HTML snippet I provided in the beggining, And that's it. But for some reason the iframe keeps loading all the time and refreshing.

Iframe not loading inside Angular variable

0 Answers