Angular: Programatically set style of complex css selector

Question

I'm looking for a way to do the following programatically:

tr.product-row:not(.expanded-row):active {
   background-color: red; <--this part will be calculated in my .ts file
}

The reason is that I want the active color to be a lighter version of the color of a different element. I can calculate the color I need but don't know how to set it.

Can it be done with Renderer2?

Are you using SASS? If so perhaps lighten() function would suit your need. If you're using just CSS, you can try filter: brightness(); — penleychan
– penleychan, Commented Apr 6, 2021 at 20:04
@penleychan I can't use sass or css because I want the user of the component to be able define the color. — ShanieMoonlight
– ShanieMoonlight, Commented Apr 6, 2021 at 20:35

Alexander Staroselsky · Accepted Answer · 2021-04-06 20:58:04Z

1

What about using CSS variables which you can bind to in templates:

CSS:

tr.product-row:not(.expanded-row):active {
   background-color: var(--some-var); // specify some variable
}

Template:

<!-- bind to that variable using directive against component property -->
<div [style.--some-var]="theVariableInComponentFile">foobar</div>

Here is an example of binding to a CSS variable in action.

Hopefully that helps!

edited Apr 6, 2021 at 20:58

answered Apr 6, 2021 at 20:04

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

2 Comments

ShanieMoonlight Over a year ago

Thanks./ your stackblitz isn't loading but the I got enough info from your answer. That's a cool trick that I didn't know about. Cheers.

Alexander Staroselsky Over a year ago

@ShanieMoonlight I updated the url, hopefully that works now.

Nikhil Dhawan · Accepted Answer · 2021-04-06 20:25:33Z

0

This could be done via directives with input value to them of the color you calculate And then rendrer can be used to set the color you passed

answered Apr 6, 2021 at 20:25

Nikhil Dhawan

691 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular: Programatically set style of complex css selector

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related