Strings with HTML Tags (Angular)
To render a translation containing HTML tags using pipe, you must set the translated value via the innerHTML
attribute of the wrapping component.
Consider a translation hello_peter
with the English value Hello <b>Peter</b>!
This way, it renders the HTML tags.
<div [innerHTML]="'hello_peter' | translate"></div>
For t
component, the attribute isHtml
does the trick.
<div t key="hello_peter" [isHtml]="true"></div>
Security
The HTML is automatically sanitized for both t
component and translate
pipe. However, if you don't expect HTML
input in your code, it's always not to provide the strings using innerHtml.
<b onmouseover=alert('XSS testing!')>Hello Peter!</b>
This is sanitized to: <b>Hello Peter!</b>