How to render nested innerHtml element into innerHtml?

Question

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 ¥

What it is possible to see in DOM:

However, inside div never renders. What can I do to render inside div where there is a comment ?

Change innerHtml for innerHTML.

Martin Parenteau
– Martin Parenteau

2018-02-07 15:48:43 +00:00
Commented Feb 7, 2018 at 15:48 — Martin Parenteau
– Martin Parenteau, Commented Feb 7, 2018 at 15:48
@ConnorsFan thanks, nevertheless it does not render.

StepUp
– StepUp

2018-02-07 15:56:23 +00:00
Commented Feb 7, 2018 at 15:56 — StepUp
– StepUp, Commented Feb 7, 2018 at 15:56

Martin Parenteau · Accepted Answer · 2018-02-08 12:53:49Z

3

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>`;
}

edited Feb 8, 2018 at 12:53

answered Feb 7, 2018 at 15:56

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

StepUp Over a year ago

please, see my updated question. I am so sorry for misleading you by conditions of task. I just wanted to simplify condition of task. Please, see my question again.

Martin Parenteau Over a year ago

In any case, you cannot include the inner div inside of the outer one, and set innerHTML of the outer div at the same time, and expect to see both content.

Collectives™ on Stack Overflow

How to render nested innerHtml element into innerHtml?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related