AngularJS ng-class if-else Expression
Last Updated :
25 Jul, 2024
In the AngularJS framework, Conditional statements, like if-else expressions, are a feature that helps many web developers like us to apply different conditions in AngularJS applications. This can be used with the ng-class directive that allows us to control the styling of the elements based on the change of variables and other user inputs. These if-else expressions in AngularJS help to maintain the real-time user actions and the real-time update in UI as per the condition is been satisfied. In this example, we will see the examples of if-else expressions in the ng-class with different approaches.
Steps for Configuring the AngularJS App
The below steps will be followed to configure the AngularJS App
Step 1: Create a new folder for the project. We are using the VSCode IDE to execute the command in the integrated terminal of VSCode.
mkdir if-else
cd if-else
Step 2: Create the index.html file in the newly created folder, we will have all our logic and styling code in this file.
We will understand the above concept with the help of suitable approaches & will understand its implementation through the illustration.
ng-class if-else with a Function
In this approach, we are using the ng-class if-else with the function. Here we have taken an interactive example, where we are changing the CSS classes using the if-else conditions. We have a UI button when clicking on that button the green-text class and blue-text classes are triggered as per the conditions and the color of the h1 is been changed. Also, we have the input field, where the user can enter the number and check if it is even or odd using the if-else expression in AngularJS. The result is been shown in the form of an alert box. We have used functions along with if-else expressions. Each functionality is wrapped in the function and each function consists of its if-else blocks.
Example: Below is an example that shows the use of ng-class if-else with a Function in AngularJS.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>
AngularJS ng-class if-else
</title>
<style>
.green-text {
color: green;
}
.blue-text {
color: rgb(250, 0, 0);
}
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 24px;
margin-top: 20px;
}
h3 {
font-size: 18px;
color: rgb(0, 0, 0);
}
button {
font-size: 10px;
padding: 4px 16px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp"
ng-controller="myCtrl">
<h1 ng-class="classGetFunction()">
GeeksforGeeks
</h1>
<h3>
Approach 1: Using ng-class if-else with a Function
</h3>
<button ng-click="toggleColor()">
Toggle Color
</button>
<br />
<br />
<input type="number"
ng-model="num"
placeholder="Enter a number" />
<button ng-click="evenOddFunction()">
Check Even/Odd
</button>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.isGreen = true;
$scope.toggleColor = function () {
$scope.isGreen = !$scope.isGreen;
};
$scope.classGetFunction = function () {
if ($scope.isGreen) {
return "green-text";
} else {
return "blue-text";
}
};
$scope.evenOddFunction = function () {
if ($scope.num % 2 === 0) {
alert($scope.num + " is even.");
} else {
alert($scope.num + " is odd.");
}
};
});
</script>
</body>
</html>
Output
ng-class with nested if-else expressions
In this approach, we are using multiple if-else expressions to demonstrate the conditions. Here, in this interactive example, we have the button that is used to change the color of the circle and also it changes the text in it. The text and background color within the circle alternated between "GeeksforGeeks", "AngularJS" and "GPL". Using the multiple if-else nested expressions we are changing the color at every click.
Example: Below is an example that showcases the use of ng-class with nested if-else expressions in AngularJS.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>
AngularJS ng-class if-else
</title>
<style>
.container {
text-align: center;
margin-top: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
cursor: pointer;
transition:
background-color 0.3s,
color 0.3s;
}
.circle-green {
background-color: #4caf50;
color: white;
}
.circle-blue {
background-color: #2196f3;
color: white;
}
.circle-red {
background-color: #f44336;
color: white;
}
button {
font-size: 16px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
h1 {
font-size: 36px;
color: green;
}
p {
font-size: 18px;
color: rgb(0, 0, 0);
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp"
ng-controller="myCtrl">
<div class="container">
<h1>GeeksforGeeks</h1>
<div class="circle"
ng-class="{
'circle-green': isGreen,
'circle-blue': !isGreen && !isRed,
'circle-red': isRed }"
ng-click="changecolorFunction()">
{{ colorName }}
</div>
<h3>
Approach 2: Using ng-class with
nested if-else expressions
</h3>
<p>
Click the "Toggle Color" button or
the circle to change the color and <br />
text inside the circle. This is
achieved using AngularJS ng-class
with nested if-else expressions.
</p>
<button ng-click="changecolorFunction()">
Toggle Color
</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.isGreen = true;
$scope.isRed = false;
$scope.changecolorFunction = function () {
if ($scope.isGreen) {
$scope.isGreen = false;
$scope.isRed = true;
$scope.colorName = "AngularJS";
} else if ($scope.isRed) {
$scope.isRed = false;
$scope.colorName = "GPL";
} else {
$scope.isGreen = true;
$scope.colorName = "GeeksforGeeks";
}
};
$scope.colorName = "GeeksforGeeks";
});
</script>
</body>
</html>
Output
Similar Reads
What are expressions in AngularJS ? In this article, we will see the expressions in Angular JS, along with knowing the different methods for implementing it through the code examples.Expressions in AngularJS, are the statements that are to be evaluated, that is placed inside the double curly braces. The result of the evaluation will b
5 min read
AngularJS ng-class-even Directive The ng-class-even Directive in AngularJS is used to specify the CSS classes on every even appearance of HTML elements. It is used to dynamically bind classes on every even HTML element. If the expression inside the ng-class-even directive returns true then only the class is added else it is not adde
2 min read
AngularJS Expressions In this article, we will see the Expressions in AngularJS, along with understanding their implementation through the examples. Expressions in AngularJS are used to bind application data to HTML. The expressions are resolved by AngularJS and the result is returned back to where the expression is writ
2 min read
AngularJS ng-class Directive The ng-class Directive in AngularJS is used to specify the CSS classes on HTML elements. It is used to dynamically bind classes on an HTML element. The value for the ng-class has either string, an object, or an array. It must contain more than one class name, which is separated by space, in the case
2 min read
What is Angular Expression ? Angular is a great, reusable UI (User Interface) library for developers that help in building attractive, and steady web pages and web application. In this article, we will learn about Angular expression. Table of Content Angular ExpressionDifferent Use Cases of Angular ExpressionsSyntaxApproach Ang
4 min read