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 : AngularJS Grid CRUD Example - Angular UI Grid

Toggle Class using ng-class Example 1

CSS

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

JS

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

$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 6 Tutorial with Top 10 Examples