Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
angularjs – ng-class Directive
The ng-class Directive in angularjs allows the user to dynamically set the CSS classes on an HTML element by databinding an expression which will further represent all those classes to be added. The class is only added if the expression inside the ngClass Directive returns True, else it will not be added. It is supported by all the HTML elements.
The directive does not set any duplicate class if it was already set. When the expression changes, the previously added classes will be removed and the new classes will be added only after that.
Syntax
<element ng-class="expression">..Content..</element>
Example − ngClass Directive
Create a file "ngClass.html" in your Angular project directory and copy-paste the following code snippet.
<!DOCTYPE html>
<html>
<head>
<title>ngClass Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.edit {
color: green;
font-size: 1.5em;
}
</style>
</head>
<body ng-app="" style="text-align: center;">
<h1 style="color:green">
Welcome to Tutorials Point
</h1>
<h2>
angularjs | ngClass Directive
</h2>
<div>
<input type="button" ng-click="edit=true" value="Style" />
<input type="button" ng-click="edit=false" value="Reset" />
<br><br>
<span ng-class="{true:'edit'}[edit]">
SIMPLY EASY LEARNING
</span>
</div>
</body>
</html>Output
To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.
Example 2
Create a file "ngClass.html" in your Angular project directory and copy-paste the following code snippet.
<!DOCTYPE html>
<html>
<head>
<title>ngClass Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
<style>
.index {
color: white;
background-color: green;
}
</style>
</head>
<body ng-app="app" style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
angularjs | ngClass Directive
</h2>
<div ng-controller="demo" style="margin-left: auto; margin-right: auto; text-align: center; display: block;">
<table style="text-align: center;">
<thead>
<th>Select any frontend framework:</th>
<tr ng-repeat="i in sort">
<td ng-class="{index:$index==row}" ng-click="sel($index)">
{{i.name}}
</td>
</tr>
</thead>
</table>
</div>
<!-- Script for passing the values and checking... -->
<script>
var app = angular.module("app", []);
app.controller("demo", [
"$scope",
function ($scope) {
$scope.sort = [{ name: "angularjs" }, { name: "ReactJS"}, { name: "VueJS" }];
$scope.sel = function (index) {
$scope.row = index;
};
},
]);
</script>
</body>
</html>Output
To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.
522 Views
