Translate pipe with html tags

user_11079996 0
Viewed 425

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>"

translate angular-reactive-forms angular validation html
1 Answers

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>
user_110799960
Related