Writing style that updates based on a component’s state is a really common pattern on the web. There are several ways to dynamically update your styling depending on what you want to do. Let’s look at a few.
Class and Style directives
Using ngClass
The simplest way to update the style of your component is by using ngClass. This directive can dynamically add or change the class name of an element within your component. Let's imagine we have a button element that we want to mark as primary or secondary. We can write the following: