How to show interpreted HTML in title attribute of a div, taken from Angular string variable?

Question

I have an angular variable myAngularVariable="some<br>HTML text" and a div

<div [innerHTML]="myAngularVariable" title="{{myAngularVariable}}"></div>

This way, inside the div I get the HTML of the variable interpreted, i.e. inside the div the result shown is

some
HTML text

but when i hover to show the title tooltip I get "some<br>HTML text".

There is a way to show on hover the HTML text interpreted?

Answer 1

If you must put a newline in title then replace the HTML <br> with new line .

<div [innerHTML]="myAngularVariable" title="{{myAngularVariable.replace('<br>','
')}}"></div>