CODEWITHSUNDEEP
angularangular-cliobject-tag
jredd
jredd

Reputation: 198

Html object tag reloading when angular2 action happens

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

Upvotes: 3

Views: 3363

Answers (2)

Didexe
Didexe

Reputation: 128

Also if your component logic allows it you can use changeDetection: ChangeDetectionStrategy.OnPush to avoid triggering it on each change.

Upvotes: 0

Ahmed Musallam
Ahmed Musallam

Reputation: 9753

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

Upvotes: 5

Related Questions