angularjs – ng-class Directive

AngularJSWeb DevelopmentFront End Technology

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.

raja
Published on 08-Oct-2021 13:35:59
Advertisements