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…

• Why fluentd loss most of it's log while using http output plugin (in similar timestamp)
• Java Mouse Listener – Can event type be detected inside of an event?
• flutter build ipa works locally, but not when run on github actions on the same machine
• CSS Imported by a Dependency
• Module '"rxjs"' has no exported member 'firstValueFrom'
• what use spring multiple handler websocket session service
• Failing to increment pair count correctly add_pairs Tideman CS50
• How can I get the average cost from a specific column from a table in R
• The theme system is not working for me and I'm not sure why
• Sorting multiple rows of un-sorted data based on text string – GSheets
• Tkinter RuntimeError: main thread is not in main loop when trying to insert item into listbox from different thread
• SwiftUI: Generating a continuous alphabetical list (from a-z then from aa, bb, cc, …, aaa, bbb, ccc)
• AWS Eventbridge rule trigger once all in-flight sqs messages are processed
• Avoid calling a method in a loop
• How to add a single value in datagridview with c#?
• MenuItem with onClick={popupState.close} in Material-ui V 5.0 how to execute a Link to open the component?

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