CODEWITHSUNDEEP
htmlangularng-bootstrap
Michal Bialek
Michal Bialek

Reputation: 499

Component selector in variable - Angular 2

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?

Upvotes: 1

Views: 826

Answers (2)

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

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.

Upvotes: 1

Victor Godoy
Victor Godoy

Reputation: 1692

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>

Upvotes: 0

Related Questions