Conditionally implementing CSS styles using ng-class Directive
In this approach, we are using the ng-class directive that allows us to conditionally apply the CSS classes to HTML elements like h1, h3, etc. based on the AngularJS expressions. Using this directive we are binding the CSS classes to particular variables and expressions and then changing them as per the choice. In the below example, we are changing the color, and underlining the text which is defined in the HTML. We are doing this through the button click when a certain condition is met.
Example: Below is an example that showcases conditionally applying CSS in AngularJS in AngularJS using ng-class.
HTML
<!DOCTYPE html> <html ng-app="myApp"> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script> <title> How to conditionally apply CSS styles in AngularJS? </title> <style> .styled-button { background-color: #ff4949; color: white; border: none; padding: 4px 12px; margin-right: 10px; cursor: pointer; } .button-container { display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; } .styled-button+.styled-button { margin-left: 10px; } .label { margin-right: 10px; } </style> </head> <body ng-controller="myCtrl"> <h1 ng-class= "{'green-text': isGreen}"> w3wiki </h1> <h3 ng-class= "{'blue-text': isBlue, 'underline': isUnderline}"> Approach 1: Using ng-class </h3> <div class="button-container"> <div class="label"> Toggle Color: </div> <button ng-click="toggleColor()" class="styled-button"> Toggle Green </button> </div> <div class="button-container"> <div class="label"> Toggle Other Styles: </div> <button ng-click="toggleBlue()" class="styled-button"> Toggle Blue </button> <button ng-click="toggleUnderline()" class="styled-button"> Toggle Underline </button> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.isGreen = false; $scope.isBlue = false; $scope.isUnderline = false; $scope.toggleColor = function () { $scope.isGreen = !$scope.isGreen; }; $scope.toggleBlue = function () { $scope.isBlue = !$scope.isBlue; }; $scope.toggleUnderline = function () { $scope.isUnderline = !$scope.isUnderline; }; }); </script> <style> .green-text { color: green; } .blue-text { color: blue; } .underline { text-decoration: underline; } </style> </body> </html> |
Output:
How to conditionally apply CSS styles in AngularJS ?
In AngularJS we can build the dynamic single-page application with interactive CSS embedded in it. But as usual, while developing the application, the CSS is once statically defined and used, we are not changing the CSS when the application is running. But, in AngularJS we can dynamically change the UI of the application based on the conditions and also as per the user inputs. There are various techniques through which we can conditionally apply the CSS styles in AngularJS applications. In this article, we will cover the two approaches through which we can apply the CSS to the components as per the condition or the user input.