CODEWITHSUNDEEP
javascripthtmlangularinnerhtml
StepUp
StepUp

Reputation: 38094

How to render nested innerHtml element into innerHtml?

I have a div which renders HTML code currency:

<div [innerHtml]="item.Currency" title="" class="currTooltip"> <!-- This div 
                                            renders and show currency! -->  

    <div [innerHtml]="item.Currency" title="" class="tooltiptext"></div> <!-- This div
                                                          never rendered! -->   
</div>

item.Currency is equal to &#165;

What it is possible to see in DOM:

enter image description here

However, inside div never renders. What can I do to render inside div where there is a comment <!-- This div never rendered! -->?

Upvotes: 0

Views: 2267

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73721

You try to set the content of the outer div in two different ways at the same time. You include an inner div as its content and you also specify its innerHTML property. Only one of the two will be used (the one set with innerHTML, apparently). You should decide if the outer div contains the inner div, or if its content is provided by innerHTML.

If you want to have both, you can use one of these methods:

Method 1 - Include two inner elements:

<div title="" class="currTooltip">
  <span [innerHTML]="item.Currency" ></span>
  <div [innerHtml]="item.Currency" title="" class="tooltiptext"></div>
</div>

Method 2 - Include the entire inner div HTML inside of the innerHTML property of the outer div:

<div [innerHTML]="item.Currency + innerDivHtml" title="" class="currTooltip">
</div>

with innerDivHtml defined as a property getter:

get innerDivHtml(): string {
  return `<div title="" class="tooltiptext">${this.item.Currency}</div>`;
}

Upvotes: 3

Related Questions