I have couple of buttons for ListView and GridView. For switching between these 2 buttons I had written JQuery like below-
<script type="text/javascript">
$(document).ready(function () {
$("button.switcher").bind("click", function (e) {
e.preventDefault();
var theid = $(this).attr("id");
var theitems = $("ul#items");
var classNames = $(this).attr('class').split(' ');
if ($(this).hasClass("active")) {
// if currently clicked button has the active class
// then we do nothing!
return false;
} else {
// otherwise we are clicking on the inactive button
// and in the process of switching views!
if (theid == "gridview") {
$(this).addClass("active");
$("#listview").removeClass("active");
// remove the list view and change to grid
theitems.removeClass("tilelist");
theitems.addClass("gridlist");
}
else if (theid == "listview") {
$(this).addClass("active");
$("#gridview").removeClass("active");
// remove the grid view and change to list
theitems.removeClass("gridlist")
theitems.addClass("tilelist");
}
}
});
});
</script>
Now I want move this functionality from Jquery to Angular2 typescript application. Can anyone please guide me on this? How do I implement addClass and removeClass functionality on button click from angular2 template?
This question is related to
typescript
angular
Why not just using
<div [ngClass]="classes"> </div>
https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html
Try to use it via [ngClass]
property:
<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
(click)="toggle(!isOn)">
Click me!
</div>`,
You can basically switch the class using [ngClass]
for example
<button [ngClass]="{'active': selectedItem === 'item1'}" (click)="selectedItem = 'item1'">Button One</button>
<button [ngClass]="{'active': selectedItem === 'item2'}" (click)="selectedItem = 'item2'">Button Two</button>
If you want to due this in component.ts
HTML:
<button class="class1 class2" (click)="clicked($event)">Click me</button>
Component:
clicked(event) {
event.target.classList.add('class3'); // To ADD
event.target.classList.remove('class1'); // To Remove
event.target.classList.contains('class2'); // To check
event.target.classList.toggle('class4'); // To toggle
}
For more options, examples and browser compatibility visit this link.
Source: Stackoverflow.com