In this article we will discuss Angular Class Binding. Before starting this article please go through our previous article of Angular Attribute Binding.
➤ What is Angular Class Binding
The Angular Class Binding is basically used to add or remove classes from the HTML elements. It is also possible in Angular to add CSS Classes conditionally to an element, which will create the dynamically styled elements and this is possible because of Angular Class Binding.
➤ Take an Example and see how exactly it works
Open the style.css file and add the below css into it. You can find styles.css file within the src folder of your project.
➥ The styles.css is already added in angular.json file like below;
➥ Open the app.component.ts file and add a button inside the template section then add the class.
Now run the application and you should see the ‘colorClass’ is applied to the button element as expected as shown in the right image.
➥ Using Class Binding in Angular
Let's do modify some code in app.component.ts file , we have created a property called ClassesToApply in the AppComponent class. We have also specified the class binding for the button element. The word 'class' is in a pair of square brackets and it is bound to the property 'ClassesToApply'.
Now run the application and you should get the button with applying CSS like italic and bold as shown in the image.
➥ Adding or removing a single class
Suppose you want to add or remove a single class, then you need to include use the prefix ‘class’ within a pair of square brackets and followed by a DOT (.) and the name of the class that you want to add or remove.
The following example adds the boldClass to the button element. Notice it does not remove the existing colorClass which is added using the class attribute.
Now run the application then you should see the button with red color and bold. If you set the ApplyBoldClass property value to false or remove the property altogether from the AppComponent class, then the CSS class i.e. boldClass will not be added to the button element.➥ Angular Class Binding using "!" symbol
In Angular Class Binding, it is also possible to use the "!" symbol. Notice in the following example, we have set ApplyBoldClass property value to false. As we use the "!" symbol in the class binding, the class is going to be added to the button element.
Now when you run the application, then you should see the bold class is applied to the button element as expected.
➥ How to remove an existing class using Class Binding in Angular ?
As per our example we have 3 classes (colorClass, boldClass, and italicsClass) added to the button element using the class attribute. Then the class binding removes the boldClass.
➥ Add or Remove multiple classes in Angular
In order to add or remove multiple style classes in angular, the angular framework provides one directive called ngClass directive which you can use to remove or add multiple classes as shown in the below example. What is a directive and what are the different types of directives that we will discuss in detail in our upcoming articles. For now, let us see how to use the ngClass directive to add or remove multiple classes.
Code Snippet Explanation
- Here the colorClass is added using the class attribute
- The ngClass directive is bind to the AddCSSClasses() method of the AppComponent class
- Here, AddCSSClasses() is method that returns an object with 2 key/value pairs. The key is the CSS class name and the value can be true or false. If the value is true then it will add the class and when the value is False then it will remove the class.
- Since both the keys (boldClass & italicsClass) are set to true, both classes will be added to the button element
- The let is a new type of variable declaration in JavaScript. let is similar to var in some respects. In our upcoming article, we will discuss let and var in detail as well as discuss the differences between them. For this example, you can also use var and it should work.
Summary
In this tutorial we discussed Angular Class Binding. If have any question related to this topic then give your feedback.
Post a Comment