How to use add class property in angular2

Question

I have issue for my angularjs 2 code.I want to apply this css through angular2.

Here, my jquery code :

Show how can I use this code in angular 2. how should I use the property add class in angular 2.

Please help me.

do you even try to google? http://stackoverflow.com/questions/30410402/adding-class-to-element-using-angular-js — Jurij Jazdanov, May 12 '17 at 11:02
yes, but I think that not work for angular 2. I am searching for angular 2 not angularjs — Ravi Shah, May 12 '17 at 11:03

Michael · Accepted Answer · 2017-05-12T18:12:30.930

Unfortunate that everyone so far is giving you Angular answers.. When using Angular2, try not to use jQuery. There are very few cases where jQuery should be used directly.

To conditionally add a class to a DOM element, you need to add a conditional variable to the element itself.

For example, if you want <input id="username" class="username"> to conditionally have the slide1 class, you would change the input element to look like this:

<input id="username" class="username [class.slide1]="myBoolean">

That boolean value can be set by the click function. To add a click event to, say, a button, you would have <input type="button" (click)="myFunction()">. You would then define a function called myFunction() in the component. myFunction() would set this.myBoolean to true or false, which will toggle the slide1 class.

See here for how events (like click) in angular2 work and here for conditionally adding styles.

Agreed, you should not be using jQuery in Angular2. – Joe Keene May 12 '17 at 13:21 — Joe Keene, May 12 '17 at 13:21

score 1 · Answer 2 · answered May 12 '17 at 11:17

var app = angular.module('myApp',[]);
 app.controller('showCrtl',function($scope){
   $scope.addclass=function(event){
        event.target.classList.add('colorClass');
      };
 });

.colorClass{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="showCrtl">
  <input type="button" value="click" ng-click=addclass($event)>
</div>

Please check the code hope will help you out

thanks

Thanks for reply but, I am searching for angular 2 – Ravi Shah May 12 '17 at 11:21 — Ravi Shah, May 12 '17 at 11:21

How to use add class property in angular2

2 Answers2