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 :)

Jorge Acúrcio · Accepted Answer · 2017-07-06 23:09:45Z

13

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

answered Jul 6, 2017 at 23:09

Jorge Acúrcio

2562 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

balfonso Over a year ago

Hi @Jorge! Much thanks for your answer. Really like how short and concise it is. Though I haven't tried your solution yet, I think that this could easily work on a single item or video iframe on a page. However, on my case, I needed to create a solution that can be used by all the comments in a loop as well as be shared to other components in the project. Again, I really appreciate your answer! I'll try it later and let you know how it goes =)

balfonso · Accepted Answer · 2017-07-09 11:20:19Z

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.

isamrish · Accepted Answer · 2019-01-27 09:18:14Z

1

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.

answered Jan 27, 2019 at 9:18

isamrish

113 bronze badges

1 Comment

grijalvaromero Over a year ago

Thanks it works, the innerHTML for some reason calls a loop and refreshing all the content

wutzebaer · Accepted Answer · 2021-06-04 17:30:34Z

0

I had the same problems even after caching the secure url, it turned out that the problem occours if you use the secure url for more than one iframe.

Each iframe needs it's own data-url-instance.

answered Jun 4, 2021 at 17:30

wutzebaer

15k20 gold badges107 silver badges180 bronze badges

Collectives™ on Stack Overflow

Iframe doesn't stop from reloading in Angular loop

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related