Angular 6 convert string to an Html using pipe

Question

My input string is

  html:string="&lt;a role="button" class=" fas fa-trash-alt fa-1x" title="Remove Link" href="#"&gt;&lt;/a&gt;"

I want this to be converted into an raw html

Pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({
  name: 'htmldecoder'
})
export class HtmldecoderPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }

}

Html Code :

<div>
    <div [innerHtml]="html | htmldecoder">
    </div>
</div>

The output getting in UI is

<a role="button" class="fas fa-trash-alt fa-1x" title="Remove Link" href="#"></a>

Expected Output Should be the Button

Not sure there's an easy way out. i guess you can try something like [this](https://stackoverflow.com/a/59025233/3933927). keep in mind there are very few cases where `bypassSecurityTrust...` is required. and is mostly a bad idea security wise (xss). so make sure you know what you're doing. — Stavm, Jun 03 '20 at 11:08
@anup.p You can check my answer, also focus on what Stavm has said — Aditya toke, Jun 03 '20 at 11:56

score 0 · Answer 1 · answered Jun 03 '20 at 11:55

Make this following changes in your code and it will work, the code quite simple for self-explanation

app.component.ts

  html = `html:string="&lt;a role="button" class=" fas fa-trash-alt fa-1x" title="Remove Link" href="#"&gt;aditya&lt;/a&gt;"`;

pipe

  transform(value) {
    value = value.substring(13, value.length-1);
     var doc = new DOMParser().parseFromString(value, "text/html");
     const value123 = doc.documentElement.textContent;
    return this.sanitized.bypassSecurityTrustHtml(value123);
  }

app.component.html

<div [innerHTML]="html | htmldecoder">

Angular 6 convert string to an Html using pipe

1 Answers1