CODEWITHSUNDEEP
htmlangularpdf
Tek
Tek

Reputation: 119

Angular doesnt set dynamic HTML embed src attribute at second time

I am trying to set PDF file paths dynamically to embed tag using this.renderer.setAttribute(this.pdf.nativeElement, "src", ...

At first I can set embed src PDF path and it displays on screen but second time I set for another path it doent work as expected.

Can anyone help?

Live demo link is: https://stackblitz.com/edit/angular-kghaku

Upvotes: 2

Views: 2768

Answers (2)

Yash
Yash

Reputation: 3576

Try binding:

  <embed #pdf src="{{ selectedSRC }}">

In component:

  selectedSRC: string;

  setpdf1(){
    this.selectedSRC = "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf";
  }

  setpdf2(){
    this.selectedSRC = "https://file-examples.com/wp-content/uploads/2017/10/file-sample_150kB.pdf";
  }

Upvotes: 0

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

You will need to first remove the src attribute and then apply the new one. Also, need to wrap the setAttribute in a setTimeout, since it needs to execute after removeAttribute

StackBlitz Demo

 setpdf1() {
    this.renderer.removeAttribute(this.pdf.nativeElement, "src");
    setTimeout(() => {
      this.renderer.setAttribute(this.pdf.nativeElement, "src", "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf")
    })
  }

  setpdf2() {
    this.renderer.removeAttribute(this.pdf.nativeElement, "src");
    setTimeout(() => {
      this.renderer.setAttribute(this.pdf.nativeElement, "src", "https://file-examples.com/wp-content/uploads/2017/10/file-sample_150kB.pdf")
    })
  }

Upvotes: 2

Related Questions