Translate pipe with html tags-CodePudding

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

CodePudding user response：

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 
     *ngIf="showMessage" 
     [innerHtml]="errorMessage | translate">
</div>