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

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
– Angular University, Commented Jan 7, 2016 at 12:31
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... — Thierry Templier
– Thierry Templier, Commented Jan 7, 2016 at 13:21

Cody Gray · Accepted Answer · 2019-02-11 03:09:13Z

49

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, 2019 at 3:09

Cody Gray♦

246k53 gold badges510 silver badges590 bronze badges

answered Jan 7, 2016 at 12:23

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

navin saini Over a year ago

thanks @thierry its working

Vishnu Sureshkumar Over a year ago

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.

DWilches Over a year ago

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

Collectives™ on Stack Overflow

How to bind html into Angular 2.0 [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related