ng-class

What is ng-class:

ng-class used to add a class in HTML element on a particular condition .

Description of ng-class:

On rendering if a given condition is true then this class will be added on that element where this ng-class directive placed. it is very useful to adding a class .you can add more than on class on different condition too.

Syntax of ng-class:

<div ng-class="{'classname':condition}"></div>

How to Use ng-class/ng-class Example:

<style>

    .mybackgroundcolor {

        background-color: yellow;

    }

</style>

 AngularJs Example 1:

<div>

    Angularjs Example of ng-class

    <br />

    <div ng-init="IsClassApply=true" ng-class="{'mybackgroundcolor':IsClassApply}">

        This is angularjs example of ng-class

    </div>

</div>

  o/p:   Angularjs Example of ng-class

           This is angularjs example of ng-class

 AngularJs Example 2:  

<div ng-app="webapp">

    <div ng-controller="angularjsexampleCtlr">

        <div>

            Angularjs Example of ng-class

            <br />

            <div ng-class="{'mybackgroundcolor':IsClassApply}">

                This is angularjs example of ng-class

            </div>

        </div> 

    </div>

</div>

    <script>

        angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {

            $scoep.IsClassApply = true;

        });

    </script>

      o/p: Angularjs Example of ng-class

            This is angularjs example of ng-class