Angular [innerHTML] vs document.getElementById().innerHTML

Question

I have code that generates a random symbol svg but when I try to bind that svg as [innerHTML] I get no results, but when I bind document.getElementById().innerHTML my SVG displays as normal

holder : any
createSymbolIcon(): any {
    //placeholder until get full list of icons
    let symbolsSIDC = ['G*C*FS TP --*****', 'SUP*------*****', 'SNP*------*****']
    var renderedContent = "";
    for (var i = 1; i <= 10; i++) {
      var sidc = symbolsSIDC[Math.floor(symbolsSIDC.length * Math.random())];
      renderedContent = new ms.Symbol(sidc, { size: 30, infoFields: false }).asSVG();
       if(angularBind){
         this.holder = renderedContent
       } else {
         document.getElementById("symbols" + i).innerHTML = renderedContent;
       }
    }   
  }
}

Ignoring the loop and the holder var only holding the last element, here is what the binds look like in the HTML

<div id="symbols1" [innerHTML]='holder'></div>

Lastly, renderedContent has an output similar to

"<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="35.4" height="38.4" viewBox="41 26 118 128"><path d="M 45,150 L 45,30,155,30,155,150" stroke-width="4" stroke="black" fill="rgb(170,255,170)" fill-opacity="1" ></path><path d="M45,50 l0,-20 110,0 0,20 z" stroke-width="4" stroke="none" fill="black" ></path></svg>"

Any idea what is causing this svg tag to not render when it is bound with the [innerHTML] value? I would prefer not using document.getID

Thanks!

I tried `
{{holder}}
` where it just printed out plaintext, the same with `[innerHTML]='holder'` I'll try `innerHTML="{{holder}}"` tomorrow and I'll have a plunker set up by then as well — Surreal, Aug 21 '17 at 21:20

score 3 · Accepted Answer · answered Aug 21 '17 at 21:25

3

You are doing a simple mistake: You have to put the holder inside double-quotes (" ").

<div id="symbols1" [innerHTML]="holder"></div>

This should also work imo:

<div id="symbols1" innerHTML="{{holder}}"></div>

answered Aug 21 '17 at 21:25

FAISAL

33,618
10
97
105

I am on mobile, if it throws any errors in console then maybe it would be about sanitizing (safe html), or write here the error you receive, if any ! – FAISAL Aug 21 '17 at 21:30
1

No bones, I'll do a deeper dive tomorrow, but what would be the different between `'` and `"` with binding? I have been using both interchangeably – Surreal Aug 21 '17 at 21:31
1

See this answer for safe sanitization of html: https://stackoverflow.com/a/41089093/1791913 – FAISAL Aug 21 '17 at 21:52

Angular [innerHTML] vs document.getElementById().innerHTML

1 Answers1