angularjsionic-frameworkionic3decodedecodeuricomponent

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


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:

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 ..


Solution

  • 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.