Пользовательский атрибут Angular2 для селектора CSS

Question

Я пытаюсь установить пользовательский атрибут в div, чтобы мой селектор CSS мог его найти.Но я не могу найти правильный синтаксис.

css:

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

html:

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

Это работает, но если я попробую с угловым:

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

Я получаю сообщение об ошибке: Невозможно выполнить привязку к 'customAttr', поскольку это не известное свойство 'div' .Хорошо ... правильно, но почему это проблема?

Я также пытался:

<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>

Они не выдают ошибку, но и не работают.

Как мне установить свойство пользовательского тега, распознаваемое селектором css с помощью angular?

Answer 1

Работает в обоих направлениях

с использованием параметра в тс и с жестким кодом

<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
 }