There are times when you need to style an element or add some class to it only on a certain condition and not always. Example, on a shopping site, there may be thousands of items. But while displaying the page to a user, some items are displayed with an icon besides them such as a star or a heart to indicate that this item was marked as favorite sometime back by this user. This can be easily achieved by adding a class dynamically on the condition that this item was flagged as favorite or not. In angular, this is called Class Binding.
How to add dynamic class to an element
Let’s say you want a class named active based on some condition to an input element. In angular, you can do it by using following syntax.
<input [class.active] = “isActive” id=”myInput”/>
From the above syntax, in order to add a dynamic class enclose it within square brackets([ and ]) preceded with “class.” and associate it with a condition. If the condition is true, the class will be added else it will not. In this example, isActive is a variable in the component class of this HTML template. If this variable will be true, the element will have the class active added to it else no class will be added. This technique is called Class Binding.
We may also give a condition here directly as shown below.
<input [class.active] = “inputVal === 3” id=”myInput”/>
Here inputVal is a variable in the component class. If its value is 3, class active will be added to the input else not. Important point to note is that the condition should either return true or false.
It is also possible to add multiple classes to the same element using Class binding. Conditions can be different or even same. Thus, below declaration is perfectly valid.
<input [class.active] = “isActive” [class.visible] = “isActive” id=”myInput”/>
If the value of isActive is true, then 2 classes will be added to the element. These 2 classes will be active and visible.
Last point to remember is that the element can already have a class added to it and another dynamic class can be added to it by Class binding. Example,
<input class=”visible” [class.active] = “isActive” id=”myInput”/>
This element has a class named visible added to it. This class will remain added to it anyway but class active will be added to it based on the value of isActive.
Changing element color on click using Class binding
Suppose there is a toggle button whose color should change every time it is clicked. HTML template for the button is given below
This element already has a class named toggle added to it. This class provides it the required style attributes such as width, height etc., and its initial color. We are adding a new class disabled to it which will be added conditionally based on the value of isDisabled variable. It also calls a method when clicked. CSS for the element is given below.
Class which we are adding dynamically is just changing the background color of the element. Component class of the HTML template is given below.
We are adding the dynamic class based on the value of field isDisabled which is false initially. This means that when the page loads, this class will not be added to the element.
When the element is clicked, disable method is called which reverses the value of the field isDisabled. If it is true, becomes false and vice-versa.
Thus, when it is clicked for the first time, isDisabled becomes true and class disabled is added to the element and its color changes. Again when the element is clicked, isDisabled becomes false and class disabled is removed from the element, its color changes back to default.
Hope this post helped you to understand the concept of class binding in angular.