Angular Toggle Class using ng class

Also Read : first love marriage in the world

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 : AngularJS Send authentication token http header

Toggle Class using ng-class Example 1

CSS

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

JS

Also Read : tamilblasters, 9kmovie, filmygod, hdhub4u, vegamovies, tamilrockers website link and 1377x proxy.

$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 : Angular date filter in range Examples