Recommand · May 14, 2022 0

How to add a hover effect with dynamic styles to a component element?

I have this Angular component where hover effect is currently applied with pseudo-class :hover in .scss file. But I want to apply the hover effect with dynamic values.

So suppose if I want the element’s background to change on hover, the current css looks like this:

.element {
     display: flex;
     justify-content: center;

     &:hover {
          background-color: red;

But now I want the hover background color to have dynamic values that is available inside the component provided by the user from the UI so the color could be anything. Another thing which I also want to achieve is to add a class to the element when it is selected. What I mean is when hovered, the background will change to a dynamic value but if the element is selected, that same color will be the background color. And if unselected, it will go back to the original color.

I’m new to Angular so I’m not sure how to achieve this. Anyone can help me?

You may also like…

amazon-web-services android angular api arrays c# css dart dataframe django docker excel express firebase flutter html ios java javascript jquery json kotlin laravel linux list mongodb mysql node.js pandas php postgresql python python-3.x r react-native reactjs regex spring spring-boot sql sql-server string swift typescript vue.js