Angular 5 custom pipe - node.js

Question

I am new to Angular and facing this issue.
I want to create a custom pipe for convert decimal codes into the base64 image then displaying them in views. I have complete code for this issue but don't know how to use it for the custom pipe.
This is my code:
my-component.ts
this.imgIn = "";
var chars1 = dataParkir.pictstart.data; // array of decimal codes
for (var k = 0; k < chars1.length; k++) {
var convert = String.fromCharCode(chars1[k]); // convert into base64
this.imgIn = this.imgIn + convert;
}
this.base64ImageIn = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64,' + this.imgIn);
Has anyone else experienced this, please help me?

Answer 1

I highly suggest you to take a look at the docs, it's really easy to understand and gives you a good amount of information that you might need to create your custom pipe, Here's the link to the official docs: Angular - Pipes

Answer 2

If your snippet of code already does what you want, then moving to a custom pipe is pretty straight forward. You just need to bind your array of decimal and use a pipe that converts it exactly like you do now. Something like:
Pipe:
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Pipe({
name: 'base64'
})
export class Base64Pipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer){}
transform(value: any,){
let imgIn="";
for (var k = 0; k < value.length; k++) {
var convert = String.fromCharCode(value[k]); // convert into base64
imgIn += convert;
}
let base64Url =this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64,' + imgIn);
return base64Url;
}
}
And you'd use it like so: [src]="yourDecimalCodeArray | base64"
Here's a Stackblitz to illustrate.
Keep in mind that using this.sanitizer.bypassSecurityTrustResourceUrl mean you have to bind safely (Safe value must use [property]=binding after bypass security with DomSanitizer).
Hope this helps.