Angular 2: setting pseudo element css

Question

I have a component which has a pseudo element class with a border background like so:

styles: [
    `
        .arrow_box.config::after {
            border-bottom-color: attr(data-config-color);
        }
    `
]

The tag this applies to looks like this:

<div class="arrow_box config" [attr.data-config-color]="(configData && configData.menu_bar_background ? configData.menu_bar_background : '#ebebeb')"></div>

With configData being declared in the component and changing from time to time based on user interaction.

I have looked at these questions:

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

Dynamically fill css Pseudo-element 'before' content with Angular2

But from both of those questions, I can't seem to deduce what I'm doing wrong. In chrome's inspector, I can see that my ternary operator assignment evaluates to #ebebeb, which is fine, but the .arrow_box.config::after says the value assigned to border-bottom-color is invalid. What am I doing wrong?

Gerome Schutte Gerome Schutte · Accepted Answer · 2017-03-02T08:04:59

It seems that I missed in the attr() official specification that support for properties other than content is experimental (read: doesn't work at the time of writing [March 2017]).

Another approach that I tried was using CSS variables and binding to the variable in ngStyle, but since css variable support isn't cross browser, it wasn't viable.

Instead, I ended up using an inner div to replace my pseudo after element.

Angular 2: setting pseudo element css

1 Answers