Angular
February 19, 2022
Angular HTML Binding
For safe content
<div [innerHTML]="myVal"></div>
DOMSanitizer:
Potential unsafe HTML needs to be explicitly marked as trusted using Angulars DOM sanitizer so doesn't strip potentially unsafe parts of the content
<div [innerHTML]="myVal | safeHtml"></div>
with a pipe like
In this - app.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) { }
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}