CODEWITHSUNDEEP
angularangular6pipeblobinternet-explorer-11
Varsha Bommarabettu
Varsha Bommarabettu

Reputation: 364

Bind angular pipe to a dynamically created HTML element

I am trying to display a blob image. In IE 11 it is not supported and displays a broken image, so I have created a pipe which converts blob image to base 64.

Is there a way where I can bind this pipe to a newly created image element ?

Following code doesn't seem to be working,

const uploadedImgElement = document.createElement('img');
uploadedImgElement.src = response.data.attachmentDetails.fileFullPath + '| blobToBase64';

where blobToBase64 is a pipe.

Upvotes: 1

Views: 613

Answers (2)

Zhi Lv
Zhi Lv

Reputation: 21656

You could also refer to this sample to add an image element in Angular application:

html code:

<div id="div_container">

</div>

Component.ts:

export class AboutComponent implements OnInit {

  constructor(private sanitizer:DomSanitizer) { }
  ngOnInit() {

    const newimage = document.createElement("img");
    newimage.src = this.base64Image;
    document.getElementById("div_container").innerHTML = newimage.outerHTML;

  }

  base64Image='data:image/png;base64, base64data';
}

The screenshotas like this.

Upvotes: 0

KShewengger
KShewengger

Reputation: 8269

You should declare the Pipe inside of your Component

@Component({
  ...,
  providers: [ BlobToBase64Pipe ]     // Declare it here
})
export class SampleComponent implement OnInit {

  // Add it on your constructor 
  constructor(private blobToBase64Pipe: BlobToBase64Pipe) {}

  ngOnInit() {
    ...

    const filePath = response.data.attachmentDetails.fileFullPath; 

    // Perform your pipe transform here
    const convert = this.blobToBase64Pipe.transform(filePath);
  }

}

Upvotes: 1

Related Questions