使用 i18n 为文本的特定部分添加样式

Question

I have a text that is translated to 12 languages. But I would like a specific part of the text to be underlined somehow - preferably inside the json-file where all my translations are.

To take an example the text in English goes like this:

"You've entered the wrong password 3 times. Click here to login again"

I wish to only underline the 'Click here'-part, but have tried (from what I can see was the answer in another SO-question)

"wrong": {
    "password": "You've entered the wrong password 3 times. <u>Click here to login again</u>"

but that doesn't work. It just shows the text with the actual

< u >Click here < /u >

showing..

The HTML goes as following:

// left out code
<ng-content></ng-content>
<span ng-if="wrongpassword" class="wrongpassword" (click)="wrongpasswordClicked()"> {{ wrongpassword$ | async }} </span>

I suspect it shouldn't have anything to do with css, but I've tagged it anyways, since I might be missing something?

update: what I've tried based on ErBu's answer:

<div>
  <ng-content {{ wrongpassword$ | async as trythis }} ></ng-content>
  <span *ngIf="wrongpassword" class="wrongpassword" (click)="wrongpasswordClicked()" 
[innerHTML]="trythis">
  </span>
</div>

but that doesn't show the text at all... maybe some async operation is missing?

Answer 1

All text will be treated as regular text (for security reasons) unless explicitly specified otherwise. To allow injection of html you can use

<div [innerHTML]="your text"></div> 

For more details check out angular documentation

In your particular case it should be:

  <div>
      <ng-content *ngIf="{{ wrongpassword$ | async as trythis }}" >
         <span class="wrongpassword (click)="wrongpasswordClicked()" 
    [innerHTML]="trythis">
      </span>
    </ng-content>
    </div>

Ps I'm adding this as an answer instead of comment for formatting:)