Conditionally implementing CSS styles using ng-style Directive
In this approach, we are using another directive that is ng-style, which allows us to dynamically apply the inline CSS styles that are based on the AngularJS expressions. This approach is more efficient than Approach 1, as it gives more control over the individual style properties like color, font, and background. etc. In the below example, we are changing the color of h1 (w3wiki) as per the user input, also the color of h3 and its italic flavor changes when the condition is met. The condition is like, when the user clicks on the button, the color and italic flavor get added.
Example: Below is an example that illustrates conditionally implementing CSS using the ng-style directive in AngularJS.
HTML
<!DOCTYPE html> <html ng-app="myApp"> <head> <title> How to conditionally apply CSS styles in AngularJS? </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script> <style> .styled-button { background-color: #007bff; color: white; border: none; padding: 10px 20px; 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; } .styled-input { padding: 8px; margin-right: 10px; } </style> </head> <body ng-controller="myCtrl"> <h1 ng-style= "{'color': userColor || (isGreen ? 'green' : 'black')}"> w3wiki </h1> <h3 ng-style="style"> Approach 2: Using 'ng-style' </h3> <div class="button-container"> <label>Select Style:</label> <button ng-click="applyStyle('default')" class="styled-button"> Default </button> <button ng-click="applyStyle('blue')" class="styled-button"> Blue </button> <button ng-click="applyStyle('italic')" class="styled-button"> Italic </button> </div> <div class="button-container"> <label>Enter Custom Color:</label> <input type="text" ng-model="userColor" placeholder="Enter a color name" class="styled-input"> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.isGreen = false; $scope.style = {}; $scope.userColor = ''; $scope.applyStyle = function (selectedStyle) { switch (selectedStyle) { case 'default': $scope.style = {}; break; case 'blue': $scope.style = { 'color': 'blue', 'font-weight': 'bold', 'font-size': '18px' }; break; case 'italic': $scope.style = { 'font-style': 'italic', 'font-size': '20px' }; break; default: $scope.style = {}; break; } }; $scope.custColor = function () { if (/^#([0-9A-F]{3}){1,2}$/i.test($scope.userColor) || /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test($scope.userColor)) { $scope.style = { 'color': $scope.userColor }; } else { alert('Invalid color format. Please use a'+ ' valid color name or hexadecimal code.'); } }; }); </script> </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.