CODEWITHSUNDEEP
htmlangularinnerhtmlangular-dynamic-components
Nutch
Nutch

Reputation: 11

How do I include a component in dynamically generated HTML string applied through [innerHTML] in Angular?

So I want to add a component inside of some HTML that has been inserted into the DOM through [innerHTML]. My current approach is as follows, but I am stuck at trying to obtain an ElementRef...

I am dynamically generating a string of text and HTML and inserting it into an element as such:

<p [innerHTML]='formattedHTML'></p>

formattedHTML is dynamic content, and will contain something like the following:

Please welcome <span class="insert-name-component" data-user="{user_id: 'xxxxx', full_name: 'Test User'}"></span> to the company!

I already have a component, let's call it <name> (it takes user_id and full_name as inputs) that I want to insert into all instances of the .insert-name-component span. From here I was trying to apply a directive to the outer <p> element that somehow targets the span and inserts the name component into the span using ComponentFactory, but I did not know how to obtain an ElementRef of the span because it is added through [innerHTML]. Obviously I cannot use a #ref because it is not a template.

Is this possible? Or is there a different approach for adding a component to dynamic HTML like this?

Upvotes: 1

Views: 286

Answers (0)

Related Questions