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

4 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

Blogroll

Follow this blog by Email

Popular Posts