Angular 5 Component Selector in variable returning string instead of component content

Question

I have some data that contains the selector of a component:

{
  label: 'This is a label',
  componentSelector: '<app-mycomponent></app-mycomponent>'
}

In my app.component.html

Instead of doing this (for example):

<div>
  <app-mycomponent></app-mycomponent>
</div>

I would like to do this:

{{data.componentSelector}}

At the moment when I try this it's returning a string instead of replacing it with the contents of the component.

How can I do this?

Can you try <div [innerHtml]="data.componentSelector"></div>? — Lansana Camara
– Lansana Camara, Commented Nov 29, 2017 at 18:54

FussinHussin · Accepted Answer · 2017-11-29 19:01:06Z

1

You cannot interpolate a component, because it is made up of typescript, html, and css. it has to compile to be displayed, if you think about it, it makes sense.

On another note, even if you could interpolate, it would be a poor Angular Pattern, and could have unexpected outcomes especially in production. Stick to the best practices.

answered Nov 29, 2017 at 19:01

FussinHussin

1,8245 gold badges21 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

Angular 5 Component Selector in variable returning string instead of component content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related