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 on 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.
Mmmmmm ... thinking ..... 🤔🤔🤔
Parameterize Pipe
Yeh! I can use pipe to transform data one state to another.
Parameterize Pipe to transform the base64array string to a base64 image. The 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
As I mentioned above, this is a parameterized pipe. I recommend referring to pipes, parameterized pipes, and custom pipes (Documentation). It will make your code more reusable.
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 one another.
Thank you 👍. Happy coding👏
