Skip to main content
Version: 5.x.x

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>