Angular allows you to add a single CSS class to HTML elements within your component and bind them to a condition. Based on the result of the condition the class gets applied or not.
[00:01] In this example, we have a component with a div inside here. We apply here a rounded border CSS class, which we define here in the styles property. Now, very often in real world applications, you need to add those classes conditionally based on some application state.
[00:19] In Angular, we can do that by wrapping the whole part here in square brackets. Then we add a point here, and we basically translate our CSS class like this. Then we make the equals sign, and we add the condition. That's a true.
[00:52] Let's set it to false to demonstrate this. If you set it to true, it gets activated again. To make this even a bit more dynamic, we could use here a p tag. Let's add a checkbox. Let's throw in a label. We need an input type of type checkbox. Add the border. Add the label here.
[01:18] Now, we basically establish a two-way binding with our isBorder variable. Now, if we toggle this, the border gets toggled, and we can switch it back on and off.