100

I use Angular 2.0.0-beta.0 and I want to create and bind some simple HTML directly. Is is possible and how?

I tried to use

{{myField}}

but the text in myField will get escaped.

For Angular 1.x i found hits for ng-bind-html, but this seems not be supported in 2.x

thx Frank

fbenoit
  • 3,220
  • 6
  • 21
  • 32

1 Answers1

222

Bind to the innerHTML attribute

There is 2 way to achieve:

<div [innerHTML]="myField"></div>
<div innerHTML="{{myField}}"></div>

To mark the passed HTML as trusted so that Angulars DOM sanitizer doesn't strip parts of 

<div [innerHTML]="myField | safeHtml"></div>

with a pipe like

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

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
    // 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

bashkan
  • 464
  • 1
  • 5
  • 14
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • i am using the same thing to prevent it from stripping the click event, but now the click event wont fire, i have seen other answers stating for a dynamic event click, but how do i make the click work in this simple situation mentioned above – Vinay Pratap Singh Bhadauria Jun 06 '17 at 08:32
  • You can't add anything Angular-specific using `[innerHTML]="..."` binding. The only way to make this work is to create and compile a component at runtime. – Günter Zöchbauer Jun 06 '17 at 08:33
  • do you have any small example for this, that dynamic tab click example is way to much, i want to simply implement dynamic anchor links. – Vinay Pratap Singh Bhadauria Jun 06 '17 at 09:10
  • https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular/38888009#38888009, https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 – Günter Zöchbauer Jun 06 '17 at 09:12
  • Do you think if it is possible to do it within html like the following using Angular: in ts file: HTMLstring = ''; in HTML
    – Jun Jul 02 '17 at 22:24
  • Sure, but if you also want to add `(click)="clickHandler()"` you're out of luck. – Günter Zöchbauer Jul 03 '17 at 06:07
  • @GünterZöchbauer ` – k11k2 Aug 23 '17 at 13:52
  • @k11k2 Did you check the link at the end of my answer? – Günter Zöchbauer Aug 23 '17 at 13:58
  • @GünterZöchbauer what about function calling how can I achieve it like `(click)="clickHandler()"` any work around? – k11k2 Aug 23 '17 at 14:06
  • The plunker uses an old Angular version that didn't need and didn't have the santizer yet. – Günter Zöchbauer Aug 23 '17 at 14:08
  • @GünterZöchbauer yea, edited my comment. – k11k2 Aug 23 '17 at 14:17
  • See my comment at https://stackoverflow.com/questions/45842153/angular-2-innerhtml-input-binding. There is no way to accomplish that with `innerHTML`. You can add the HTML using `[innerHTML]="myHtml | safeHtml"` and then query for the element and use `addEventHandler` to add a click handler (like in plain JS) – Günter Zöchbauer Aug 23 '17 at 14:19
  • 1
    https://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2 angular way of event listen "NICE STUFF" – k11k2 Aug 23 '17 at 15:07
  • 1
    I'm not sure if this is an update to the spec, but in Angular 5+, it is now DomSanitizer from @angular/platform-browser and not Sanitizer, which is an @angular/core class. – LeftOnTheMoon May 21 '18 at 02:42
  • Looks like the safeHtml pipe should only be necessary / used in rare circumstances. https://angular.io/api/platform-browser/DomSanitizer – CRice Jun 04 '18 at 04:20
  • @CRice depeds on what kind of app you write. If you want to buuld features thar depend on it, you don't have much choice. You should be aware that you can create security holes if you are nor careful. – Günter Zöchbauer Jun 04 '18 at 04:32
  • 1
    @GünterZöchbauer Yes I agree, I just wanted to point this out so people think about it first and not just copy the pipe in all cases. – CRice Jun 04 '18 at 04:53
  • @GünterZöchbauer Do you know how do we render a html(which has properties binded) and make sure the binded values are displayed as a final output. Assume, we have these properties in the component which is rendering this html dynamicaly – Darey Jan 06 '20 at 12:38
  • There was a way to create a component dynamically at runtime where you could pass HTML with property+event binding. I don't know by heart where to find more details. I haven't used it myself. I don't think there is an easier way. There should be several questions about this topic here at SO. – Günter Zöchbauer Jan 06 '20 at 13:25