Angular2 custom attribute for css selector

Question

I'm trying to set a custom attribute in a div so that my css selector can find it. But I can't find the right syntax.

css:

 div[customAttr="dabadeedabadie"] {
    color:blue
 }

html:

<div customAttr="dabadeedabadie">I'm blue</div>

That works, but if I try with angular:

<div customAttr="{{'dabadeedabadie'}}">I'm blue</div>

I get an error: Can't bind to 'customAttr' since it isn't a known property of 'div'. Well... right but why is that a problem ?

I also tried :

<div attr.customAttr="'dabadeedabadie'">I'm blue</div>
<div attr.customAttr="{{'dabadeedabadie'}}">I'm blue</div>
<div [attr.customAttr]="'dabadeedabadie'">I'm blue</div>
<div [attr.data-customAttr]="'dabadeedabadie'">I'm blue</div>

Those don't throw an error but don't work either.

How can I set a custom tag property recognized by the css selector with angular ?

לבני מלכה · Accepted Answer · 2018-12-13 11:10:05Z

2

It works both of ways

using parameter in ts and with hard coded

<div [attr.customAttr]="'dabadeedabadie'">I'm blue</div>
<div [attr.customAttr]="name">I'm blue with param</div>

TS

 name = 'dabadeedabadie';

CSS

 div[customAttr="dabadeedabadie"] {
    color:blue
 }

answered Dec 13, 2018 at 11:10

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Angular2 custom attribute for css selector

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