trying to display string as HTML

Question

I am trying to display a string as HTML and have it be able to execute like template code. Ultimately the string comes from the backend. Here is a Stack Blitz that shows my different attempts.

Can this be done in Angular (using 6)?

Possible duplicate of [Angular HTML binding](https://stackoverflow.com/questions/31548311/angular-html-binding) — Lafexlos, May 25 '18 at 14:51
Possible duplicate of [Angular2 innerHtml binding breaks data binding](https://stackoverflow.com/q/40279899/1009922). — ConnorsFan, May 25 '18 at 15:01
You found ways to display the HTML correctly. The problem is that the Angular bindings cannot be processed when HTML code is inserted with `[innerHTML]`, as explained in [this post](https://stackoverflow.com/a/40280167/1009922). — ConnorsFan, May 25 '18 at 15:06
You may find a few ideas in [this post](https://stackoverflow.com/q/38888008/1009922). — ConnorsFan, May 25 '18 at 15:13

Abel Valdez · Answer 1 · 2018-05-25T15:46:59.820

0

Hello try bt using [innerHtml]

Edited

HTML

<div #divref [innerHTML]="html4"></div>

component

  html4 = 'click <a><b>here</b></a>';
  @ViewChild("divref", {read: ElementRef}) divref: ElementRef;


  ngAfterViewInit() {
    // child is set

   this.divref.nativeElement.addEventListener('click', ()=>{
      this.reset();
    })    

  }

demo

edited May 25 '18 at 15:46

answered May 25 '18 at 14:50

Abel Valdez

2,368
1
16
33

Yes, I am using it and the sanitzer in my various examples. See the stack blitz code. Not finding much luck. :-( – Scott May 25 '18 at 15:03
ready, take a look to this code. inside of `[innerHTML]` you can not include script even if you use **DomSanitizer** you will no have access to the context just **javascript** functions, this example get the element reference and add the click event to the element – Abel Valdez May 25 '18 at 15:49
did you get it? – Abel Valdez May 25 '18 at 17:42
did you fixed it? – Abel Valdez May 28 '18 at 18:00
Well sort of. I am changing our code so we are not relying on the equivalent of $compile trick. – Scott May 29 '18 at 11:59

score 0 · Answer 2 · answered May 25 '18 at 15:04

0

You need to sanitize your HTML using the DomSanitizer class before displaying the HTML. This is a built-in way to get around Angular's security against XSS.

answered May 25 '18 at 15:04

p4r1

2,490
16
18

trying to display string as HTML

2 Answers2