Convert base64 string to image and show in a table using Angular Pipe

 Hi, greet; today's  (14/07/2022)  subject has related to Angular Pipe and shows an image in a table based on base64binarystring

Use Case

Working in the angular project, today's task was to populate images in an HTML table with data. The backend service received these images as Base64BinaryArray converted strings with the content types (The database did this conversion). The target is to populate the image base64 string in the table.

Below is a sample of the received data  and expected UI result.

Problem-solving thoughts

• It should be reusable anywhere easily in an HTML template. (Reusability)
• I can use a simple method, service, or angular specified Pipe for this transformation. 

Mmmmmm ... thinking .....  🤔🤔🤔

Yes, I can use 

Parameterize Pipe 

 to transform the base64array string to a base64 image. Logic is simple.  Let's do it.

Solution

I introduced an Angular Pipe to transform a string into a base64 image. The content type is a parameter to it. 

How to use the above the pipe

The working solution is put here

Final thought

Using a parameterized pipe/ pipe is a comprehensive reusable, and straightforward solution for accomplishing tranasform data one shape to another shape in Angular HTML templates.

Hope this will help you. Will meet another vlog. 

 Thank you 👍. Happy coding👏