Html object tag reloading when angular2 action happens

Question

I'm loading a pdf into the view via the html object tag. For some reason anytime an angular2 action happens (mouseenter, mouseout, click) anywhere else in the dom, causes the object/pdf to reload. I noticed that the internalInstanceId keeps changing on the object tag but that I have no control over.

<object type="application/pdf" width="100%" height="100%" [data]="cleanUrl(item.url)" id="pdf_content"></object>

Here is a plunkr that shows whats going on. When an angular event happens (mousing over and out of the heading) it causes the object tag to reload.

https://plnkr.co/edit/sovRUOn79LTJRDhaellf?p=preview

you'll have to post more relevant code so we can help. you can try to replicate the issue in plnkr.co — Ahmed Musallam
Just came across this issue too, took me ages to notice the internalinstanceid increasing whenever there was a mouseover — Joe

Ahmed Musallam Ahmed Musallam · Accepted Answer · 2017-04-08T00:56:59

This was really interesting to figure out, the event bindings: mouseenter mouseleave trigger a change detection DoCheck and for some reason that causes the sanitizer to trigger or it's something else, not sure.

In any case, I fixed it by moving sanitization into a pipe:

@Pipe({ name: 'safeUrl'})
export class SafeUrlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    console.log(this.sanitized.bypassSecurityTrustHtml(value))
    return this.sanitized.bypassSecurityTrustResourceUrl(value);
  }
}

use it like this: <object [data]="cleanUrl(item.url) | safeUrl"></object> see this plnkr: https://plnkr.co/edit/10hzOzU31R7CgxJKQaYe?p=preview

Also this github issue may be related: https://github.com/angular/angular/issues/7055

Html object tag reloading when angular2 action happens

2 Answers