Introduction:

In this article we will explain how to ng-class directive in AngularJS or What is ng-class directive in AngularJS or why ng-class directive in AngularJS or how to change css class of html element in AngularJS with example.

  • Description:

 

In AngularJS ng-class  directive use to set CSS class of an html element. The value of the

 ng-class must be a string, an object, or an array. If it is a string, it should contain one or more, space-separated class names.

If it is an object, it should contain key-value pairs, where the key is the class name of the class you want to add, and the value is a boolean value. The class will only be added if the value is set to true.

If it is an array, it can be a combination of both. Each array element can be either a string, or an object.

 

Let’s see
an example of ng-class in angularjs
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
 
    <style>
        .Red {
            background-color:red;
            color:#fff;
            font-size:25px;
            padding:10px;
        }
        .Green {
            background-color: green;
            color: #fff;
            font-size: 25px;
            padding: 10px;
        }
        .Blue {
            background-color: blue;
            color: #fff;
            font-size: 25px;
            padding: 10px;
        }
        .Yellow {
            background-color: yellow;
            color: #fff;
            font-size: 25px;
            padding: 10px;
        }
    </style> 
</head>
<body ng-app="">
    <div>
        Change Style:
        <select ng-model="class">
            <option value="Red">Red</option>
            <option value="Green">Green</option>
            <option value="Blue">Blue</option>
            <option value="Yellow">Yellow</option>
        </select>
        <hr />
        <span ng-class="class">Sqltutorialspoint.com</span>
    </div>
</body>
</html>

 

OR

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <style>
        .Red {
            background-color: red;
            color: #fff;
            font-size: 25px;
            padding: 10px;
        }
 
        .Green {
            background-color: green;
            color: #fff;
            font-size: 25px;
            padding: 10px;
        }
 
        .Blue {
            background-color: blue;
            color: #fff;
            font-size: 25px;
            padding: 10px;
        }
 
        .Yellow {
            background-color: yellow;
            color: #fff;
            font-size: 25px;
            padding: 10px;
        }
    </style>
    <script>
        var app = angular.module("app", []);
        app.controller("StyleController", function ($scope) {
            $scope.CustomClass = {};
            $scope.Class = "Yellow";
            $scope.ChangeStyle = function () {
                $scope.MyClass = $scope.Class;
            }
        });
    </script>
</head>
<body>
    <div ng-app="app" ng-controller="StyleController">
        Select background:
        <select ng-model="Class" ng-change="ChangeStyle()">
            <option>Red</option>
            <option>Green</option>
            <option>Blue</option>
            <option>Yellow</option>
        </select>
        <hr />
        <span ng-class="MyClass">Sqltutorialspoint.com</span>
    </div>
</body>
</html>

 

 

 

Output:



In above code, we have a app and controller defined. In the controller we have defined  CustomClass object, Class (for class name) properties. These properties deault value are set so that it would appear in the drop down.

Now as soon as user changes the drop downs values the span css class is updated.

I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.