How can I apply a custom class in Angular 2, similar to jQuery's

Question

How can I apply a custom class in Angular 2, similar to jQuery's

I've been having trouble with a very basic task... I need to assign a class to a <div> when I click on a button. After hours of searching online, I still haven't found a simple solution and all the examples I come across are too complex for my needs.

What I want to do is as straightforward as this (jquery) code in angular2/typescript:

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

In my component folder, I have the usual html, scss, and ts files. This functionality doesn't need to be global or anything complicated.

It's frustrating how something so simple has become difficult to achieve with modern frameworks. Any assistance would be greatly appreciated!

jquery angular typescript

Answer 1

Answer №1

To achieve this, you simply have to utilize the ngClass directive in your Angular code:

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

Learn more about NgClass on the Angular documentation page.

Answer 2

To achieve this, you simply have to utilize the ngClass directive in your Angular code:

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

Learn more about NgClass on the Angular documentation page.

Answer 3

Answer №2

Understanding this concept is simpler than you think: the key is knowing where and what to search for.

Here is one solution:

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

Another approach:

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

Answer 4

Understanding this concept is simpler than you think: the key is knowing where and what to search for.

Here is one solution:

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

Another approach:

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

How can I apply a custom class in Angular 2, similar to jQuery's

Answer №1

Answer №2

Similar questions

Loading more pages will be triggered by each click with JQuery's .load() function

Applying custom CSS to individual divs based on their text height using jQuery

How can we stop the page from scrolling after a click?

In Angular2, the derived class can inherit decorators

Unable to initialize default values on Form Load in Angular Reactive Forms

Using jQuery to convert JSON data into an array

Upgrading from Angular 5 to 6: Embracing the RxJS Changes without the crutch of rxjs

Steps for invoking a Node.js function from a distinct JavaScript function on the front end

Show a Toast in React without relying on useEffect to manage the state

Most efficient method of retrieving the properties of an object that may possibly contain another object within it

Utilizing JQuery to extract particular user information from an HTML webpage

Error: The function child.send is not defined as a valid function

Ways to send JWT in the request header to an Angular6 application

Conceal the sidebar once user is logged in

Embedding Globalize.js into an Angular component

By clicking, dynamically add unique classes along with incrementing numerical values

What are some ways I can optimize my Bootstrap CSS code to enhance responsiveness across different page widths?

Seeking assistance with setting up BxSlider installation

Best practice for setting up components in Angular 2 using HTML

How to Retrieve the Absolute Index of the Parent Column Using jQuery Datatables