Iframe does not stop after reload in Angular loop
I'm working on a comment section on a forums page where I used tinyMCE to deliver content. Content or comment is added asynchronously in a loop (* ngFor) of a pre-existing comment object after being added to the database. The content is passed using the innerHTML property, which calls a method that returns the decoded html content.
html code:
<div [innerHTML]="trustContent(comment)">
method returns:
this.sanitizer.bypassSecurityTrustHtml(content);
However, the problem is that every time I add or embed media (iframes) like youtube video using the editor, all videos / frames flicker and reload indefinitely. Any ideas, suggestions and solutions are greatly appreciated and appreciated! Thank:)
source to share
First of all, apologies for the late publication. I've been very busy over the past few weeks and haven't had the luxury of time to post my answer so far. Anyway ... In the interest of those who may be facing this same issue, what worked for me was using a pipe. So I created a simple, customizable feed that transforms the given content and returns safe and reliable html.
Trumpet:
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 in the view the content / comments are displayed as
<div [innerHTML]="comment.content | safe_html"></div>
To repeat, comments have been outputted inside the loop.
source to share
after a long time, you must have found a solution, but I will write as I solved it.
I ran into the same problem you described and, in my case, the way I solved it was to store the url value in a string instead of using a function.
So instead of
<div [innerHTML]="trustContent(comment)">
I used
<div [innerHTML]="safeContent">
and in component .ts
safeContent = this.sanitizer.bypassSecurityTrustHtml(content);
It stopped an endless loop for me
source to share
I faced the same problem, I was getting data from REST API and storing it in messages. I first used a function to return safe content, but that did not solve the problem, but when I used a variable instead of a function, the problem of reloading the innerHTML DOM was resolved.
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 this solves your problem too.
source to share