Component selector in variable - Angular 2

Question

I have written my own table module. Calling it in HTML code looks like this:

<my-table [data]="variableWithArr"></my-table>

Now, pretty nice table is being displayed. Cool. But what if I want to have a progress bar in some column of table? I thought that I could put a HTML code with component selector as value, for example bootstrap progressBar, like this:

for(let record of variableWithArr) {
    record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>';
}

Unfortunatelly, Angular displays only a HTML code but dooes not interpret it as component selector, so I receive something like that in DOM:

<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td>

How to fix it?

pkozlowski.opensource · Accepted Answer · 2017-01-25 16:49:51Z

1

This is not how Angular works - you can't insert arbitrary HTML (innerHTML or otherwise) and expect that directives will be picked up & applied. Making Angular work this way would require shipping entire compiler to a browser and would defeat the whole purpose of all the great optimizations that can be done with the ahead-of-time (AOT) compilation.

tl;dr; nope, you can't do this and this has nothing to do with the ng-bootstrap project, but rather with design decisions behind Angular.

answered Jan 25, 2017 at 16:49

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

2 Comments

Michal Bialek Over a year ago

So in that case, there is pointless to make tables which calling is like main?

pkozlowski.opensource Over a year ago

Yeh, I think that you need to play with different approaches to your table widget...

Victor Godoy · Accepted Answer · 2017-01-25 13:23:09Z

0

By looking at the docs you need to use the property [innerHTML], but to be clear only use it when you trust the code!!

So should be something like this:

<td [innerHTML]="record"></td>

answered Jan 25, 2017 at 13:23

Victor Godoy

1,69216 silver badges19 bronze badges

1 Comment

Michal Bialek Over a year ago

I am doing this already but I Angular do not interpret component selector, just prints it.

Collectives™ on Stack Overflow

Component selector in variable - Angular 2

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related