Add Class, Remove Class, Toggle Class To div With Angular2

Wednesday, 3 February 2016 | Posted by Sample

Angular2 is proving and ngClass directive as like Angular1. We can manipulate classes using this ngClass

Steps to add class using ngClass :

Initiate this.myClass to array
Push classes into above array

this.myClass = [];
this.myClass.push('red');

Steps to remove class using ngClass :

Initiate $scope.myClass to array
Pop classes from above array

this.myClass = [];
this.myClass.pop('red');

Steps to check class using ngClass :

Initiate this.myClass to array
Check index of the class that you want to check

this.myClass = ['red'];
if(this.myClass.indexOf('red') == -1) {
    alert('false');
} else {
    alert('true');
}

Code for ngClass with Array

(function(app) {
  
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app',
      templateUrl: 'ngClass_template.html'
    })
    .Class({
      constructor: function() {
        this.myClass = [];
      },
      
      addClass:function() {
        this.myClass.push('red');
      },
      
      removeClass:function() {
        this.myClass.pop('red');
      },
      
      checkClass:function() {
        if(this.myClass.indexOf('red') == -1) {
           alert('false');
        } else {
           alert('true');
        }
      }
    });

  
  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(app.AppComponent);
  });

})(window.app || (window.app = {}));

View DEMO

Steps to add class using ngClass with JSON

Initiate this.myClass to JSON object of classes and boolean values
Assign true for the JSON class name, that you want to add

this.myClass = {red:false};
addClass : function() {
   this.myClass.red = true;
}

Steps to remove class using ngClass with JSON

Initiate $scope.myClass to JSON object of classes and boolean values
Assign false for the JSON class name, that you want to remove

this.myClass = {red:false};
removeClass : function() {
    this.myClass.red = false;
}

Steps to toggle class using ngClass with JSON

Initiate $scope.myClass to JSON object of classes and boolean values
Assign opposite boolean value to the JSON class name

this.myClass = {red:false};
toggleClass : function() {
     this.myClass.red = !this.myClass.red;
};

Code for ngClass with JSON

(function(app) {
  
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app',
      templateUrl: 'ngClass_template1.html'
    })
    .Class({
      constructor: function() {
          this.myClass = {red:false};
      },
      
      addClass:function() {
          this.myClass.red = true;
      },
      
      removeClass:function() {
          this.myClass.red = false;
      },
      
      toggleClass:function() {
          this.myClass.red = !this.myClass.red;
      },
      
      checkClass:function() {
          alert(this.myClass.red);
      }
    });
  
  
  
  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

View DEMO

By Using [Class.]

Angular 2 is providing one way binding for classes with [class.<class name>]. It binds the presence of the CSS class red on the element to the truthiness of the expression redClassBool. Observe the below code

<div id="divID" [class.red]="redClassBool">
  This text color can be changed by class
</div>

Add Class

Assign true to this.redClassBool

Remove Class

Assign false to this.redClassBool

Code for [class.] binding

(function(app) {
  
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app',
      templateUrl: 'withCssClass_template1.html'
    })
    .Class({
      constructor: function() {
        this.redClassBool = false;
      },
      
      addClass:function() {
        this.redClassBool = true;
      },
      
      removeClass:function() {
        this.redClassBool = false;
      },
      
      toggleClass:function() {
        this.redClassBool = !this.redClassBool;
      },
      
      checkClass:function() {
        alert(this.redClassBool);
      }
    });
  
  
  
  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

View DEMO

Labels:AngularJS

16 comments:

Satish31 March 2016 at 11:15
Hi,

Nice blog for adding / removing css

I need help on css in angular2

I have 3 links in the html and 3 links has some classes already and on top of that I need to

add 1 more class when I click on the particular anchor element i.e active element.

can you please help me on this.
ReplyDelete
Replies
Sahil Gupta22 December 2016 at 00:24
Nice post buddy, this help me.
ReplyDelete
Replies
olive9 April 2019 at 02:53
your article is very good and very helpful. every one can use and know that how Creating Custom Animations for Use in Tableau. if you want to gif covert to image than check it you can easily understand that how to Use GIF Converter to Get Images for Marketing

ReplyDelete
Replies
Gclub7 August 2019 at 02:37
This comment has been removed by the author.
ReplyDelete
Replies
Gclub7 August 2019 at 02:46

Im grateful for the blog post.Really thank you!โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
เพียงแค่คุณสมัคร Gclub กับทางทีมงานของเราเพียงเท่านั้น
ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
สมัครสล็อตออนไลน์ >>> goldenslot
สนใจร่วมลงทุนกับเรา สมัครเอเย่น Gclub คลิ๊กได้เลย
ReplyDelete
Replies
love back Solution23 February 2021 at 03:58
Thanks For Sharing The Amazing content. I Will also share with my friends. Great Content thanks a lot

Love back Solution Specialist
Vashikaran specialist
Love Vashikaran Specialist
Vashikaran Specialist in India Vashikaran Specialist in Bangalore Vashikaran Specialist in Mumbai Love Vashikaran Specialist in Mumbai Black magic specialist astrologer
ReplyDelete
Replies
Faheem Iqbal17 August 2021 at 13:53
great informative blog
Check you Boards results here
ReplyDelete
Replies
Ana Watson15 October 2021 at 00:52
Have you ever tried COC MOD Apk, which is the Mod version of its original server.
ReplyDelete
Replies
Steven Cohen17 January 2022 at 05:19
Track your stocks in all major markets instantly with our unique live stock overview. See Ftoc Stock live prices changes as they occur and view change details, including volume and share changes.
ReplyDelete
Replies
KevinRhodes2346 April 2022 at 10:32
Hello.This post was extremely interesting, particularly because I was looking for thoughts on this topic last Thursday. Regards GBWhatsapp APK
ReplyDelete
Replies
Mark21 July 2022 at 06:56
Do you want to consult about your company's cloud services, contact 0 scale as 0scale is an AWS Premier Consulting Partner with 11 AWS expertise that offers in-depth technical skills to enable organizations to modernize on the cloud. We are skilled at designing, executing, optimizing, and handling customized cloud solutions on AWS that coerce the innovation our clients require to achieve their business transformation initiatives. 0scale
ReplyDelete
Replies
suonerie gratis30 October 2022 at 20:54
Oggi ti presento un sito Web sulle ultime suonerie-mp3-gratis.com.
ReplyDelete
Replies

Add comment

FtMocks

Add Class, Remove Class, Toggle Class To div With Angular2

Steps to add class using ngClass :

Steps to remove class using ngClass :

Steps to check class using ngClass :

Code for ngClass with Array

Steps to add class using ngClass with JSON

Steps to remove class using ngClass with JSON

Steps to toggle class using ngClass with JSON

Code for ngClass with JSON

By Using [Class.]

Add Class

Remove Class

Code for [class.] binding

16 comments:

Blogroll

Catagories

Popular Posts