-1

I'm using the following string
"Today's product of the day is {{product_code}} !"

This string above, I've sanitized and bypassed security trusted HTML this.DomSanitizer.bypassSecurityTrustHtml(str)
and put in my template using [innerHTML].
However this string also contains interpolation {{product_code}} that should have been evaluated and rendered with its actual value, such that the output must be

"Today's product of the day is XYZ-52-TV !"

However, that does not happen, instead the string gets rendered as is with the interpolation's double curly braces and the variable name.

How can I fix this?

UPDATE

component template:

<span [innerHTML]="trustHTML(str)"></span>

code for trustHTML(): 

  trustHTML(t){
    return this.DomSanitizer.bypassSecurityTrustHtml(t);
  }

value of str :
"Today's product of the day is {{trustHTML(product_code)}} !"
output using this value that appears is (not desired output):
Today's product of the day is {{trustHTML(product_code)}} !

I also tried value of str :
"Today's product of the day is <span [innerHTML]="trustHTML(product_code)"></span> !"
"Today's product of the day is product_code !"

Temp O'rary
  • 5,366
  • 13
  • 49
  • 109
  • 2
    When do you do `this.DomSanitizer.bypassSecurityTrustHtml(str)`? Can you just build the string at that point, rather than in the template? – msanford Nov 13 '17 at 20:13
  • Also, this [mcve] is missing some information, like why you're sanitizing a plain string and binding it to `[innerHTML]`. – msanford Nov 13 '17 at 20:47
  • I'm coming form the AngularJS background and I believe it could've done what I'm trying to achieve here. Which is why I didnt want to build the string before sanitizing before knowing if there are any other ideal "Angular" way to get it done. May be, like you mentioned, Angular2+ might not be supporting it now. Hence, now I had to write an interpolation parser which would do this for me. But for some reason I still don't like it this way. – Temp O'rary Nov 15 '17 at 06:11

1 Answers1

1

DomSanitizer#bypassSecurityTrustHtml is designed to be called from a component.

Knowing this, and knowing that you will have access to that complete string from wherever you call that sanitizer, just return the completely-built string from that function, à la

{{ sanitizeProductLink(productId) }}

which itself returns the complete string "Today's product of the day is XYZ-52-TV !".

Additional, Vague Supposition:

It begs the question, though, why you are injecting a plain string into [innerHTML] to being with. I assume from context you are building some kind link, a more clean approach is to make a static template and pass in variables, like

<span>Today's special is <a [link]="['special', product.id]">{{ product.name }}!</a></span>

or some such implementation.

msanford
  • 11,803
  • 11
  • 66
  • 93
  • @Temp that's not what I suggested: don't output a string with interpolation brackets. Build the final string and output the whole thing. Also, you haven't explained why you need to do it this way rather than build the template the more idiomatic way (which I suggested in the second part). – msanford Nov 14 '17 at 06:25
  • 1
    `{{}}` can't be used with sanitized content. Sanitization creates an object that is recognized by Angular as sanitized. `{{}}` stringifies this object, which breaks the value for Angular. With binding sanitized values **always only** use `[prop]="sanitizedValue"` – Günter Zöchbauer Nov 14 '17 at 09:35
  • @msanford, I hope you've read **UPDATE** section of my question above. The string is coming in from another datasource. I need to place the product code depending upon some calculations inside this string. – Temp O'rary Nov 14 '17 at 09:37
  • @GünterZöchbauer, So what do you suggest if it can't execute the interpolation inside the string? How can we explicitly trigger the interpolation once more at least? – Temp O'rary Nov 14 '17 at 09:39
  • 2
    Angular doesn't process dynamically added markup. No matter what you do, it will just completely ignore `{{}}`. Either replace the binding in TypeScript before you add the string to the DOM, or you can use something like https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular – Günter Zöchbauer Nov 14 '17 at 09:41
  • 1
    @TempO'rary Yes, I read **UPDATE**. _You cannot do it that way, no matter how much you may want to._ Which is what I explained in the answer. Perhaps you will trust Gunter, who gave much the same advice. Angular is a highly opinionated framework which, while sometimes flexible, also enforces what the team views as core behaviors, this being one of them. – msanford Nov 14 '17 at 13:55