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?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…