Iframe doesn't stop from reloading in Angular loop

Question

I'm working on a comments section of a forums page where I've used tinyMCE to supply the content. The content or the comment is being added asynchronously in a loop (*ngFor) of pre-existing comments object after being added to the database. The content is being rendered by the innerHTML property that calls a method that returns a decoded html content.

html code:

<div [innerHTML]="trustContent(comment)">

the method return:

this.sanitizer.bypassSecurityTrustHtml(content);

The issue however is that every time I add or embed a media (iframes), e.g. youtube video using the editor, all the videos/iframes flickers and reloads endlessly. Any ideas, suggestion and solution are welcomed and appreciated! Thanks :)

Answer 1

after so long you must have found a solution, but I'll write the way I solved mine.

I encountered the same problem that you described and, in my case, the way that i solved it was to save the value of the url in a string instead of using a function.

So instead of having

<div [innerHTML]="trustContent(comment)">

i used

<div [innerHTML]="safeContent">

and in the component.ts

safeContent =  this.sanitizer.bypassSecurityTrustHtml(content);

This stopped the infinite loop for me

Answer 2

First of all, apologies for the late posting. Been very busy these past few weeks and I didn't have the luxury of time to post my answer up until now. Anyways... For the benefit of the those that might encounter this exact same issue, what worked for me was through the use of a pipe. So I've created a simple, custom pipe that transforms the given content and returns a safe and trusted html.

The Pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';


@Pipe({ name: 'safe_html' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

and then on the view, the content/comments are rendered as

<div [innerHTML]="comment.content  | safe_html"></div> 

Just to reiterate, the comments were outputted inside a loop.

Answer 3

I faced the same problem , I was getting data from REST API and storing it to posts.Initially I used a function to return safe content but that didn't solve problem but when I used variable instead of function, then problem of reloading of innerHTML DOM was solved.

demo.compoment.html

<div [innerHTML]="safeContent" *ngIf="( posts != undefined) && ( posts != null)" class="py-2"></div>

demo.component.ts

ngOnInit() {
    ...
    this.safeContent = this.sanitizer.bypassSecurityTrustHtml(this.posts.html);
    ...
}

I hope It will solve your problem also.