Bind angular pipe to a dynamically created HTML element

Question

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.

constructor(private pipe: YourPipeComponentName) {} YourFunction(value) { this.pipe.transform(value, 'pipeFilter'); } — Dhaval Patel, Jun 17 '19 at 11:59
https://stackoverflow.com/questions/35159079/is-it-possible-to-use-pipe-in-the-code-in-angular-2 — Dhaval Patel, Jun 17 '19 at 11:59

score 1 · Answer 1 · answered Jun 17 '19 at 12:06

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);
  }

}

score 0 · Answer 2 · answered Jun 17 '19 at 15:21

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.

Bind angular pipe to a dynamically created HTML element

2 Answers2