Search code examples
htmlangularvalidationangular-reactive-formstranslate

Translate pipe with html tags

In Angular while using translate pipe I provide string to it to get the result message for my validation service. And it worked fine for me until I needed message with underline text. And I thought it'd be nice to work with html instead of simple text. So how can I do it without changing any css or adding logic ?

<div class="field-error text-small"
     *ngIf="showMessage">
  {{ errorMessage | translate }}
</div>

The string I need to provide: "The e-mail or password is incorrect. <u>Have you forgotten your password?</u>"

Solution

  • So, basically we just have to replace interpolation with property binding. We can bind to innerHtml and it will solve our problem. Offical docs: github.com/ngx-translate/core#6-use-html-tags

    <div class="field-error text-small"
     *ngIf="showMessage" 
     [innerHtml]="errorMessage | translate">
</div>