Angular Toggle Class using ng class

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.

READ :  Angular ngShow and ngHide Directive

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

Toggle Class using ng-class Example 1

CSS

[php]
.green {
color: green;
}
.red {
color: green;
}
[/php]

JS

[php]
$scope.toggle = false;
$scope.togglegrn = true;
[/php]

HTML

[php]


Solution of AngularJs All Problems For infinityknow.com

My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of infinityknow.com

[/php]

AngularJS: Toggle CSS Classes Example 2

HTML

[php]


From:


To:



Solution of AngularJs All Problems For infinityknow.com

My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of infinityknow.com


[/php]

JS

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

Here is a working example:

Toggle Example 1

Toggle – Example – 2

Leave a Comment