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

Steps to add class using ngClass : 

  1. Initiate this.myClass to array
  2. Push classes into above array
this.myClass = [];
this.myClass.push('red');

Steps to remove class using ngClass : 

  1. Initiate $scope.myClass to array
  2. Pop classes from above array
this.myClass = [];
this.myClass.pop('red');

Steps to check class using ngClass : 

  1. Initiate this.myClass to array
  2. 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

  1. Initiate this.myClass to JSON object of classes and boolean values
  2. 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

  1. Initiate $scope.myClass to JSON object of classes and boolean values
  2. 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

  1. Initiate $scope.myClass to JSON object of classes and boolean values
  2. 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

13 comments:

  1. 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
    1. Hello, I know it has been month till you write. I did this to solve that issue, maybe it helps someone:

      import {Component, ViewChild, ElementRef } from '@angular/core';

      @Component({
      selector: 'my-app',
      template: '< div id="navbar" class="one two three" #navEle>'
      })

      export class AppComponent {
      @ViewChild('navEle') navBar :ElementRef;

      toggleNavbar() {
      let oldClass :string = this.navBar.nativeElement.className;
      this.navBar.nativeElement.className = oldClass.replace("three", "");
      }
      }

      Delete
    2. If someone didn't understand. I delete one class from the actual div, you could also add one. It's just a string object, you can replace, split, add etc. as you wish.

      Delete
    3. You can check this link
      http://www.angulartutorial.net/2017/04/add-class-to-active-element-angular-2.html

      Delete
  2. 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
  3. Really informative article.Really looking forward to read more. Really Cool.
    เว็บไซต์คาสิโนออนไลน์ที่ได้คุณภาพอับดับ 1 ของประเทศ
    เป็นเว็บไซต์การพนันออนไลน์ที่มีคนมา Gclub Royal1688
    และยังมีหวยให้คุณได้เล่น สมัครหวยออนไลน์ ได้เลย
    สมัครสล็อตออนไลน์ได้ที่นี่ >>> Golden slot
    ร่วมลงทุนสมัครเอเย่น Gclubกับทีมงานของเราได้เลย

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete

  5. Im grateful for the blog post.Really thank you!โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร Gclub กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> goldenslot
    สนใจร่วมลงทุนกับเรา สมัครเอเย่น Gclub คลิ๊กได้เลย

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts