Angular Toggle Class using ng class

Today, We want to share with you Angular Toggle Class using ng class.
In this post we will show you Angular Toggle Class using ng class, hear for Angular Toggle Class using ng class we will give you demo and example for implement.
In this post, we will learn about Angular Toggle Class using ng class with an example.

AngularJs Toggle Class using ng-class

The correct approach would be using ng-class based on a toggle variable.

(“toggle”) is true or false.(Boolean variable)

ngClass directive:

  • Add/Remove classes based on ng-class Angular variables
  • Add/Remove classes based on ng-class evaluated expressions
  • Bind single or multiple classes based on ng-class dynamic data
READ :  Vuejs Components and Directives Written using Bootstrap

Toggle Class using ng-class Example 1

CSS

.green {
    color: green;
}
.red {
    color: green;
}

JS

$scope.toggle = false;
$scope.togglegrn = true;

HTML

<button id="btn" ng-click="toggle = !toggle" ng-class="{'green' : toggle}">Change Class-green</button>
<button id="btn" ng-click="togglegrn = !togglegrn" ng-class="{'red' : togglegrn}">Change Class-red</button>
<p>
	<hr/>
	<h1>Solution of AngularJs All Problems For infinityknow.com</h1>
	<h3>
	<a href="https://infinityknow.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of infinityknow.com </a>
</p>

AngularJS: Toggle CSS Classes Example 2

HTML

<body ng-app="infinityknowApp">
    <div ng-controller="ExampleCtrl">
        <button ng-click="data_custom=!data_custom">Custom Click Data</button>
        <span ng-hide="data_custom">From:
            <input type="text" id="from" placeholder="Form Your Name" />
        </span>
        <span ng-hide="data_custom">To:
            <input type="text" id="to" placeholder="To Your Name"/>
        </span>
        <span ng-show="data_custom"></span>
		<p>
			<hr/>
			<h1>Solution of AngularJs All Problems For infinityknow.com</h1>
			<h3>
			<a href="https://infinityknow.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of infinityknow.com </a>
		</p>
    </div>
</body>

JS

angular.module('infinityknowApp', [])
    .controller('ExampleCtrl',['$scope', function($scope){
        $scope.data_custom = true;
}]);

Here is a working example:

Toggle Example 1

Toggle – Example – 2

READ :  AngularJS AutoComplete Search Dynamic Data using Web API
Post Views: 904