implement addClass and removeClass functionality in angular2

Question

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?

Malik Shahzad · Accepted Answer · 2017-01-18 09:53:05Z

81

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.

answered Jan 18, 2017 at 9:53

Malik Shahzad

6,9893 gold badges39 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

null canvas · Accepted Answer · 2016-08-04 19:51:38Z

14

Try to use it via [ngClass] property:

<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
         (click)="toggle(!isOn)">
         Click me!
     </div>`,

answered Aug 4, 2016 at 19:51

null canvas

10.7k2 gold badges17 silver badges18 bronze badges

Comments

Saeed · Accepted Answer · 2017-05-29 16:52:57Z

7

Why not just using

<div [ngClass]="classes"> </div>

https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

edited May 29, 2017 at 16:52

Saeed

3,8653 gold badges28 silver badges43 bronze badges

answered Aug 4, 2016 at 17:45

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

2 Comments

Gretel Hendricks Over a year ago

I was not aware about this. WIll try this option. Thanks :)

Günter Zöchbauer Over a year ago

There is also [class.someClass]="someBooleanExpressino" for single classes. angular.io has lots of great docs.

farhan siddiqui · Accepted Answer · 2019-02-26 11:13:47Z

1

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>

answered Feb 26, 2019 at 11:13

farhan siddiqui

3422 silver badges6 bronze badges

Comments

score 0 · Accepted Answer · 2022-03-21 08:57:13Z

0

In Angular 13+ i got Malik's code to work using the following update:

Component:

clicked(event: any) {
    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
  }

edited Mar 21, 2022 at 8:57

answered Mar 21, 2022 at 8:51

user11913484

Collectives™ on Stack Overflow

implement addClass and removeClass functionality in angular2

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related