angular2 simple addClass (jquery style)?

Question

i've been struggling with the simplest thing... i need to add a class to a <div> when i click on, let's say, a button. I've been looking online and here on stackoverflow for hours and all i can find is some overcomplicated examples with ngFors that i cannot (and i am not able to) deconstruct to fit it to what i need.

I'm looking to achieve something as simple as this (jquery) in angular2/typescript:

 $(".button").click(function() {  
    $(".element").addClass("active");      
  });

i have a component folder with the usual html,scss, and ts file. this function doesn't need to be global or anything weird.

i can't believe how something as simple as this has become so complicated to achieve with modern frameworks.

any help is greatly appreciated!

imo the best way to achive that would be creating the decorator. Decorator should be added to every element that you want to behave in this way. Decorator will addClass to element using HostListener onClick — Maciej Wojcik
– Maciej Wojcik, Commented Oct 4, 2019 at 8:25
@MaciejWójcik that's a bit overkill and it's assuming you have the need for it on several html elements, which I think isn't the case here — user4676340
– user4676340, Commented Oct 4, 2019 at 8:27

Mustapha Larhrouch · Accepted Answer · 2019-10-04 08:25:20Z

2

It's simple. you need to use ngClass like this :

<button (click)="isActive = true">Your button</button>
<div class="element" [ngClass]="{'active': isActive}"

https://angular.io/api/common/NgClass

answered Oct 4, 2019 at 8:25

Mustapha Larhrouch

3,4053 gold badges16 silver badges29 bronze badges

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

1 Comment

mbojko Over a year ago

Or even simpler: [class.active]="isActive".

user4676340 · Accepted Answer · 2019-10-04 08:26:45Z

1

It's not complicated at all : you just do not know where/what to look for.

First solution :

<div [class.myClass]="isClicked"></div>
<button (click)="isClicked = true">Click me</button>

Second solution

<div #myDiv></div>
<button (click)="myDiv.className='myClass'">Click me</button>

answered Oct 4, 2019 at 8:26

user4676340

Collectives™ on Stack Overflow

angular2 simple addClass (jquery style)?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related