Conditionally add a single CSS class to a DOM element in Angular

[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:35] If you save, you can see the border still gets applied. If you switch it to false, it doesn't get applied anymore. Also, you can also bind this to some variable, which is defined in your JavaScript part of your component.

[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.