---

Search posts under AngularJS:

---

Dynamically set CSS class in AngularJS

How to dynamically set CSS classes on HTML element in AngularJS?

In previous post, we learnt how to CSS style using AngularJS. In this post we shall learn how to dynamically set CSS classes on HTML element. This is done by data binding to ng-class directive with an expression that represents classes to be set.

The directive works in three ways depending on what the directive value is set

1. If string - it should be space delimited class names (to set multiple classes to the element)
   
   
2. If object containing key-value pair - key is considered as class name and if its value is true that class is set
   
   
3. If array - each element should be class names as described in 1^st point above or object as described in 2^nd poing above

In below <script> block, we have two $scope properties (classBold and classUnderline) and their values are set into MakeBold and MakeUnderline functions respectively depending on whether their value is empty or not.

<style>
    .bold {
        font-weight:bold;
    }
    .italic {
        font-style:italic;
    }
    .oblic{
        font-style:oblique;
    }
    .underline{
       text-decoration:underline;
    }
    .overline{
        text-decoration:overline;
    }
</style>

<script>
    var app = angular.module("app", []);
    app.controller("ClassController", function ($scope) {
        $scope.classBold = '';
        $scope.classUnderline = '';

        $scope.MakeBold = function () {
            if ($scope.classBold.length == 0) {
                $scope.classBold = 'bold';
            } else {
                $scope.classBold = '';
            }
        };

        $scope.MakeUnderline = function () {
            if ($scope.classUnderline.length == 0) {
                $scope.classUnderline = 'underline';
            } else {
                $scope.classUnderline = '';
            }
        };
    });

</script>

HTML block 1^st part, the first text box having ng-model directive that is set as ng-class to the first paragraph. Depending on what class name is written in the text box, those are set in the first paragraph.

In the 2^nd part, paragraph ng-class is set to an object having key-value pair (where key is the name of the class and value is check boxes ng-models). Depending on which check box is checked (the ng-model value is true), that class is applied to the paragraph.

In the 3^rd part, clicking on buttons set classBold and classUnderline $scope properties to "bold" and "underline" css class respectively that in tern are set as ng-class (as an array) into 3rd paragraph. If it those buttons are clicked the value are set or removed.

In 4^th part, we are combining 1^st, 2^nd and 3^rd approach that is the ng-class directive value is set as an array in which the overline class is set depending on whether checkbox is checked or not and other css class is implemented based on what value is written in the text box.

<div ng-app="app" ng-controller="ClassController">
    <-- 1st part -->
    <p ng-class="SpaceDelimitedClass">Write the class name to apply</p>
    <input type="text" ng-model="SpaceDelimitedClass" placeholder="bold italic overline" />

    <!-- 2nd part -->
    <hr />
    <p ng-class="{bold : makeBold, italic : makeItalic, overline : makeOverline}">Apply below style</p>
    <label><input type="checkbox" ng-model="makeBold" />Bold</label>
    <label><input type="checkbox" ng-model="makeItalic" />Italic</label>
    <label><input type="checkbox" ng-model="makeOverline" />Overline</label>

    <!-- 3rd part -->
    <hr />
    <p ng-class="[classBold, classUnderline]">Apply Below Class</p>
    <button ng-click="MakeBold()">Make Bold</button>
    <button ng-click="MakeUnderline()">Make Underline</button>

    <!-- 4th part -->
    <hr />
    <p ng-class="[{overline : makeOverline1}, MyStyle]">Write or Apply CSS Class</p>
    <input type="text" ng-model="MyStyle" placeholder="bold or italic or oblic" />
    <label><input type="checkbox" ng-model="makeOverline1" />Overline</label>
</div>

Output