How to add class using Angularjs?

Today, We want to share with you addclass in angularjs.In this post we will show you ng-class angularjs, hear for angularjs remove class we will give you demo and example for implement.In this post, we will learn about AngularJS Add ng class to toggle Active Menu with an example.

Adding class to element using Angular JS

you cane enter class name then change button dynamically add Classes in angularjs Example.

Include Libs

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js

HTML Code

Step 1: index.html

<div class="container" ng-app="dApp" ng-controller="dprofileController">
<div class="col-sm-8 col-sm-offset-2">
  <div class="page-header"><h1>dynamically add Classes in angularjs</h1></div>
    <div class="form-group">
        <label>Button class name (enter some bootstrap any classes name like : danger, success, warning etc.)</label>
        <input type="text" ng-model="btnClass" class="form-control">
    </div>
        <button type="button" class="btn btn-{{btnClass}}">Default</button>
  </div>
</div>

Angularjs code

main.js

var app = angular.module('dApp', []);
app.controller('dprofileController', function($scope){
  $scope.btnClass = "danger";
});

I hope you get an idea about ng-click add class to element.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  get value of radio button jquery

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *