how to decode data from api to base64 in .html file using ionic 3

Question

i'm trying to view inside page.html file some data comes from API and this data is only long text encode via base64 , well the problem is i want to decode the text inside html file not at page.ts file so i tried many logic for that but nothing works with me . example inside HTML file:

• {{item.text|| base64}}
• {{item.text|| decodeURIComponent}}
• {{item.text|| atob}}
• atob({{item.text}})

but nothing works . inside TS page i tried to use decodeURIComponent(escape(window.atob(ielement.text))) and it's working but i want from html page

this is the text comes from API : aGVsbG8gd29ybGQh

thanks in advance ..

Answer 1

You can create an Angular Pipe for decode base64 string like below:

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Usage:
 *   value | decodeBase64
 * Example:
 *   {{ 'aGFyZXNo' | decodeBase64 }}
 *
*/
@Pipe({name: 'decodeBase64'})
export class DecodeBase64Pipe implements PipeTransform {
  transform(value: string): string {

    return decodeURIComponent(escape(window.atob(value)));
  }
}

and use this pipe as below in your HTML:

<p>Decoded text: {{'aGFyZXNo' | decodeBase64}}</p>

You need to add Pipe in you app.module file to register.