How do I conditionally apply CSS styles in Angular

Question

Q1. Suppose I want to alter the look of each "item" that a user marks for deletion before the main "delete" button is pressed. (This immediate visual feedback should eliminate the need for the proverbial "are you sure?" dialog box.) The user will check checkboxes to indicate which items should be deleted. If a checkbox is unchecked, that item should revert back to its normal look.

What's the best way to apply or remove the CSS styling?

Q2. Suppose I want to allow each user to personalize how my site is presented. E.g., select from a fixed set of font sizes, allow user-definable foreground and background colors, etc.

What's the best way to apply the CSS styling the user selects/inputs?

Answer 1

One thing to watch is - if the CSS style has dashes - you must remove them. So if you want to set background-color, the correct way is:

ng-style="{backgroundColor:myColor}"