Pass value dynamically to data-* attribute [Angular2] [duplicate]

Question

I want to write a component, which basically display a different icon based on its input. The icon framework is expecting it in the following format:

  <span class="icon icon-generic" data-icon="B"></span>

So data-icon="B" describes basically which icon to display. I would like to pass this symbol dynamically. Something like:

  <span class="icon icon-generic" data-icon={{symbol}}></span>

But this seems not to work. :-/ Is there a way to do this without creating the html in my Component class and appending it to the html?

Pardeep Jain · Accepted Answer · 2017-03-24 12:50:23Z

15

Use

 <span class="icon icon-generic" [attr.data-icon]='symbol'></span>

answered Mar 24, 2017 at 12:50

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

Comments

Günter Zöchbauer · Accepted Answer · 2017-03-24 12:49:38Z

7

Attribute bindings need the attr. prefix

attr.data-icon={{symbol}}

answered Mar 24, 2017 at 12:49

661k235 gold badges2.1k silver badges1.6k bronze badges