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
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
Explain ng-app Directive in AngularJS
In this article, we will see the ng-app directive in AngularJS and will understand its use with the help of examples. ng-app directive defines the beginning of an AngularJS application. It initializes the AngularJS framework and specifies the root element of the AngularJS application. Every AngularJ
4 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
AngularJS ng-keypress Directive
The ng-keypress Directive in AngluarJS is used to apply custom behavior on a keypress event. It is mainly used to specify what to do when the keyboard is utilized with a particular HTML element. The order of sequence that the key is pressed is Keydown, Keypress, and keyup. It is supported by <inp
2 min read
How to toggle class using AngularJS ?
In this article, we will toggle the class of an element with the help of AngularJS. The toggling of the class can be done in 2 ways, i.e., either specifying the value to 0 or 1, depending upon the condition satisfied, by initially defining the value as 0, or depending on the boolean value, i.e., tru
3 min read
AngularJS ng-class-odd Directive
The ng-class-odd Directive in AngularJS is used to specify the CSS classes on every odd appearance of HTML elements. It is used to dynamically bind classes on every odd HTML element. If the expression inside the ng-class-odd directive returns true then only the class is added else it is not added. T
2 min read
AngularJS ng-if Directive
The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it
2 min read