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.

Read Also:  PHP - MySQLi Insert Update Delete CRUD Operation using AngularJS

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:  jQuery Ajax CRUD operations in Laravel 5.7

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  ZoomingPDFViewer-zoomin and zoomout on-button click - Custom PDF Rendering
  2. Read Also:  How to get an element by id with angularjs?
  3. Read Also:  Image Crop and Upload using jQuery and PHP
  4. Read Also:  CodeIgniter JQuery Ajax Request Example
  5. Read Also:  Most Useful Laravel String Functions(helpers)
  6. Read Also:  jQuery Display Image Based on Image URL with Example
  7. Read Also:  AngularJS Add ng class to toggle Active Menu
  8. Read Also:  Angularjs Bootstrap Progress Bars Example
  9. Read Also:  JQuery QR Code Scanner reader using camera Example
  10. Read Also:  PHP Laravel 6 SweetAlert jQuery Ajax Delete Rows Example