2

I have a String variable that holds a reference to an icon, which I want to bind in the HTML to show it, as an attribute selector.

Code Snippet

.html

    <thumbnail {{ obj.getIcon() }}> </thumbnail>

.ts

    getIcon() {
        return "icon-obj" + this.id;
    }

Output

    <thumbnail "icon-obj1"> </thumbnail>

Desired Output

    <thumbnail icon-obj1> </thumbnail>

Known & Undesired alternative solution

    <thumbnail class={{ obj.getIcon() }} > </thumbnail>

Basically, the string quotes are screwing everything. It works if I use a different type of selector, like I showed in the example above that outputs to class="icon-obj1", but that's not the point.

So, any suggestion? Thanks for reading!

Sergio Carneiro
  • 3,726
  • 4
  • 35
  • 51

1 Answers1

2

There is no way of doing this. For dynamically added attributes or classes no directives or components are created anyway - only for statically added element-, attribute-, and class-names.

For adding components dynamically use DynamicComponentLoader.
I don't know yet if this also works with directives though.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567