July 12, 2018

Angular Toggle Class using ng class

By admin AngularJs, Technology 0 Comments

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 : PHP mysql with Connecting to Database Using AngularJS

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;
}]);

Angular Toggle Class using ng class

Angular Toggle Class using ng class

AngularJs Toggle Class using ng-class

ngClass directive:

Toggle Class using ng-class Example 1

CSS

JS

HTML

AngularJS: Toggle CSS Classes Example 2

HTML

JS

Here is a working example:

Add a Comment

Angular Toggle Class using ng class

AngularJs Toggle Class using ng-class

ngClass directive:

Toggle Class using ng-class Example 1

CSS

JS

HTML

AngularJS: Toggle CSS Classes Example 2

HTML

JS

Here is a working example:

Related Posts

Add a Comment