Scribd
Upload
98 views2 pages

HTML Binding in Angular

To bind HTML content stored in a variable to the innerHTML property of a div element in Angular, you need to use property binding with [innerHTML] and sanitize any unsafe HTML by passing it through the DOM sanitizer to prevent XSS attacks. For content you trust to be safe, just binding [innerHTML] will work, but for untrusted user input, you need a pipe to explicitly mark it as trusted.

Uploaded by

ashish877
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
98 views2 pages

HTML Binding in Angular

To bind HTML content stored in a variable to the innerHTML property of a div element in Angular, you need to use property binding with [innerHTML] and sanitize any unsafe HTML by passing it through the DOM sanitizer to prevent XSS attacks. For content you trust to be safe, just binding [innerHTML] will work, but for untrusted user input, you need a pipe to explicitly mark it as trusted.

Uploaded by

ashish877
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Angular HTML binding

I am writing an Angular application and I have an HTML response I want to display.

How do I do that? If I simply use the binding syntax {{myVal}} it encodes all HTML
characters (of course).

I need somehow to bind the innerHTML of a div to the variable value.

The correct syntax is the following:

<div [innerHTML]="theHtmlString"></div>
Works on 8.0.3

Angular 2.0.0 and Angular 4.0.0 final

For safe content just

<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

@Pipe({name: 'safeHtml'})
export class Safe {
constructor(private sanitizer:DomSanitizer){}

transform(style) {
return this.sanitizer.bypassSecurityTrustHtml(style);
//return this.sanitizer.bypassSecurityTrustStyle(style);
// return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
}
}
See also In RC.1 some styles can't be added using binding syntax

And docs: https://angular.io/api/platform-browser/DomSanitizer

Security warning

Trusting user added HTML may pose a security risk. The before mentioned docs state:

Calling any of the bypassSecurityTrust... APIs disables Angular's built-in


sanitization for the value passed in. Carefully check and audit all values and code
paths going into this call. Make sure any user data is appropriately escaped for
this security context. For more detail, see the Security Guide.

Angular markup

Something like

class FooComponent {
bar = 'bar';
foo = `<div>{{bar}}</div>
<my-comp></my-comp>
<input [(ngModel)]="bar">`;
with

<div [innerHTML]="foo"></div>
won't cause Angular to process anything Angular-specific in foo. Angular replaces
Angular specific markup at build time with generated code. Markup added at runtime
won't be processed by Angular.

To add HTML that contains Angular-specific markup (property or value binding,


components, directives, pipes, ...) it is required to add the dynamic module and
compile components at runtime. This answer provides more details How can I
use/create dynamic template to compile dynamic Component with Angular 2.0?

You might also like