Ng-Class-3

 

Size and color of text will change if we click on Set button because true value of setClass is assign to ng-class directive and text set to original size and color if we click on Reset button because false value of setClass variable assign to ng-class directive.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <style> .setClass { transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; color: red; font-size: 3em; } </style> </head> <body ng-app> <div> <div class="container"> <div class="well col-md-3"> <input type="button" ng-click="setClass=true" value="Set" /> <input type="button" ng-click="setClass=false" value="Reset" /> <br /> <h1 ng-class="{true:'setClass'}[setClass]">Sample Text</h1> </div> </div> </div> </body> </html>
Output