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.

Answer 1

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.

Answer 2

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