Angular Component That Takes HTML Code As Input

I am creating an angular component that displays a highlighted HTML code and the result of it's execution. The displayed HTML code lives inside a pre html element, as for the previ

Solution 1:

Solution for this is to create a custom pipe that bypass security trust html:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({name: 'sanitizeHtml'})
export class SanitizeHtmlPipe implements PipeTransform {
  constructor(private _sanitizer:DomSanitizer) {
  }
  transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

Declare it in your module and use it where you want to display the HTML string :

<div [innerHTML]=" yourHTMLstring | sanitizeHtml "> </div>