Class binding in Angular makes it very easy to set the class property of a view element. We can set or remove the CSS class names from an element’s class attribute with the help of class binding.
We bind a class of a DOM element to a field that is a defined property in our Typescript Code. Its syntax is like that of property binding.
<element [class] = "typescript_property">
- Define a property element in the app.component.ts file.
- In the app.component.html file, set the class of the HTML element by assigning the property value to the app.component.ts file’s element.
Example 1: Setting the class element using class binding.
Example 2: setting the class element using a function.
- Perl | Lexical Binding and Dynamic Binding
- Style Binding in Angular 8
- Event Binding in Angular 8
- Property binding in angular 8
- Routing in Angular JS using Angular UI Router
- Angular CLI | Angular Project Setup
- Angular 7 | Angular Data Services using Observable
- Adding Angular Material Component to Angular Application
- Difference between Angular 4 and Angular 5
- Difference between Early and Late Binding in Java
- AngularJS | Data Binding
- Node.js | This Binding
- ReactJS | Binding Event Handlers
- How to avoid binding by using arrow functions in callbacks in ReactJS?
- How to change the font of HTML5 Canvas using a button in Angular.js?
- Angular-JS ng-repeat Directive
- How ajax works? Difference between angular js and jquery
- AngularJS | angular.isObject() Function
- AngularJS | angular.isUndefined() Function
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.