ng-Class using angularjs Example

ng-Class in angularJS

        ng-Class directive to manage a css properties from the DOM Objects. This directive very support to user presentation css apply dynamically and more response, angularjs used for bootstrap css only. Write different properties from the css file and enable from the controller scope object values.

HTML:   

<div ng-app="classApp">

    <div ng-controller="ClassCtrl">

       <span ng-if="showValue">

        <p ng-class ="{'red': show, 'green': show1}">{{name}}

        </p>

        </span> 

        <span ng-if="!showValue">

        <p ng-class ="{'red': show, 'green': show1}">{{name}}

        </p>

        </span>

    </div>

</div>

Angular Script:

var app = angular.module('classApp',[]);

app.controller('ClassCtrl',function($scope){

    $scope.name = "my first ng-class logic";

    $scope.show = false;

    $scope.show1 = true;

    $scope.showValue = false;

});

CSS:

.red

{

    color:red;

}

.green

{

    color:green;    

}

Result:

Demo