CODEWITHSUNDEEP
htmlangulartypescriptangular2-directives
probot
probot

Reputation: 55

I want to load a component inside of a tag which also uses the innerHTML directive

I'm trying to use the innerHTML directive as well as trying to load a component in to that same tag.

An example:

<ul *ngFor="let item of array">
    <li [innerHTML]="item.listItemHtml">
        <app-some-component [someInput]='item.componentInput'><app-some-component>
    </li>
</ul>

so the end result should look something like this:

<ul>
    <li>
        <span>list item 1</span>
        <span>component input text 1</span>
    </li>
    <li>
        <span>list item 2</span>
        <span>component input text 2</span>
    </li>
</ul>

I'm still relatively new to angular so I'm trying to get the hang of things. If anyone could give me some insight on how I might be able to achieve this.. that would be great.

Upvotes: 1

Views: 170

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73721

You cannot have the component inside of the parent element if you also bind the innerHTML property. The element will contain only the HTML set by the innerHTML binding.

You can achieve what you want by setting the outerHTML property of a child element (a sibling of the component). It can be a div, a span or another type of element; it will be replaced with the bound HTML content anyway.

<ul *ngFor="let item of array">
  <li>
    <div [outerHTML]="item.listItemHtml"></div>
    <app-some-component [someInput]='item.componentInput'><app-some-component>
  </li>
</ul>

See this stackblitz for a demo.

Upvotes: 2

Related Questions