Subscribe Us

LightBlog

Saturday, 19 February 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);

    }

}

No comments:

Post a Comment