Bind Angular 2 variable to css pseudo-class content: attr() expression

Issue

I wanted to compare performance of rendering Angular 2 variable binding [innerText]/{{}} with binding variable as content of pseudo-class(because methods above forces element re rendering)

However, I struggle trying to make angular markup work with css.

That works

CSS:

.my-el:after {
    content: attr(my-attr);
}

HTML

<div class="my-el" my-attr="text"></div>

But after change it to my-attr="{{myVar}}" Angular throws error:

browser_adapter.js:77 EXCEPTION: Template parse errors(...)

So I red that I should use attr.my-attr="{{myVar}}"

But after changing CSS to

.my-el:after {
    content: attr(attr.my-attr);
}

it doesn't work (I guess dot isn't valid symbol here?).

I know that all above may have not much sense, however I'm finding it as interesting problem which I can't solve so far.

Any ideas how to make these two work together? Thanks in advance!

Solution

You will have to bind your value with the following way

<div class="my-el" [attr.my-attr]="myVar"></div>

This way angular will attach the myVar contents to the my-attr attribute

If you need to prepend it with data- use

<div class="my-el" [attr.data-my-attr]="myVar"></div>

Then you can access the value from your css with attr(my-attr) or attr(data-my-attr)

Answered By - eltonkamami