How to bind html into Angular 2.0 [duplicate]

Question

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

How to bind html in Angular 2.0

Bingle

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. – Fennell

Yes, you're right! I made a test with <em onmouseover="this.textContent='PWN3D!'">click here</em> and the JavaScript code is actually executed on the click... – Doorframe

Answer 1

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>';
  }
}

Doorframe

thanks @thierry its working – Bingle

what if I need to use another component inside [innerHtml], like this, which is not working <span [innerHtml]="<a [routerLink]="/test"></a>"></span> This router link is not getting compiled. – Guerrero

@Wishnu Though it's a bit late: in that case you can get away with an *ngIf on the a instead of an [innerHtml]. – Haustellum