Angular: set attribute data of HTMLs object

Question

I try to have a PDF viewer inside of a component.

For dynamically changing the PDF document within a sanitizer I need to set it by an attribute with [].

That is OK with img.

 <img src="assets/pic.jpg"/>
 <img [src]="'assets/pic.jpg'"/>

But NOT with object.

<object data="assets/test.pdf" type="application/pdf" width="300" height="200"></object>
<object [data]="'assets/test.pdf'" type="application/pdf" width="300" height="200"></object>

Why is that?

How can I set data dynamically as a result of a function.

You can try adding a *ngIf on the object element to show it when the URL is resolved and available. — Alvin Saldanha
– Alvin Saldanha, Commented Jun 25, 2019 at 22:12

Alvin Saldanha · Accepted Answer · 2019-06-27 02:00:45Z

1

Working Demo Here

You will need to sanitize and specify a SafeResource URL. See here

import { DomSanitizer , SafeResourceUrl} from '@angular/platform-browser';

export class AppComponent  {
  name = 'Angular';
   constructor(protected _sanitizer: DomSanitizer) {}

    get resolveURL() : SafeResourceUrl {
    // some logic to reolve and return the URL
    return this._sanitizer.bypassSecurityTrustResourceUrl('https://www.orimi.com/pdf-test.pdf')
    }
}

edited Jun 27, 2019 at 2:00

answered Jun 25, 2019 at 22:19

Alvin Saldanha

91610 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Angular: set attribute data of HTMLs object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related