How to bind html into Angular 2.0

Question

In angular 1 binding works like ng-bind-html="htmlValue"

How to bind html in Angular 2.0

ng-bind-html would sanitize everything to prevent script injection attacks. the solution bellow I think does not do that, but haven't tried it. — Angular University, Jan 07 '16 at 12:31
Yes, you're right! I made a test with `click here` and the JavaScript code is actually executed on the click... — Thierry Templier, Jan 07 '16 at 13:21

score 46 · Answer 1 · edited Feb 11 '19 at 03:09

46

I think that you could use the innerHtml attribute and bind something on it:

<span [innerHtml]="someHtmlContent"></span>

Here is a sample:

@Component({
  selector: 'first-app',
  template: `
    <span [innerHtml]="value"></span>
  `
})
export class AppComponent {
  constructor(private http:Http) {
    this.value = '<strong>test</strong>';
  }
}

edited Feb 11 '19 at 03:09

Cody Gray

230,875
49
477
553

answered Jan 07 '16 at 12:23

Thierry Templier

191,422
38
386
349

1

thanks @thierry its working – navin saini Jan 07 '16 at 12:30
1

what if I need to use another component inside `[innerHtml]`, like this, which is not working `">` This router link is not getting compiled. – Vishnu Sureshkumar Jun 21 '17 at 11:36
@Wishnu Though it's a bit late: in that case you can get away with an `*ngIf` on the `a` instead of an `[innerHtml]`. – Daniel Jun 04 '19 at 22:57

How to bind html into Angular 2.0

1 Answers1