Add or remove DOM classes with jQuery in Angular

Question

I am migrating an AngularJS app to Angular 2+. How should I implement the below code in Angular 2+ in order to add or remove CSS classes to the DOM:

link(scope, element, attrs) {
  let app = angular.element(document.querySelector('#app'))
  element.on('click', (event) => {
    if (app.hasClass('nav-collapsed-min')) {
      app.removeClass('nav-collapsed-min')
      this.collapseService.notify(false)
    } else {
      app.addClass('nav-collapsed-min')
      this.collapseService.notify(true)
    }
    return event.preventDefault()
  })
}

don't use querySelector or jQuery in your Angular 2, is not need and it might break your code if you want to use SSR later on. Take a look to this post blog.angularindepth.com/…. Anyway, most of this cases where you just want to toggle class can be done with ngClass directive — nicowernli
– nicowernli, Commented Feb 19, 2018 at 14:59

Gagan Prajapati · Accepted Answer · 2018-02-19 15:33:50Z

0

use ngClass in your html. eg:

<div [(ngClass)] = "{'your-class-name': condition}"></div>

answered Feb 19, 2018 at 15:33

Gagan Prajapati

1427 bronze badges

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

Comments

Omtechguy · Accepted Answer · 2018-02-19 16:43:54Z

0

in order to change the class of an object, you can use angular ngClass directive like this example or using renderer2 as part of an onClick method in the ts file as explained here. Be aware that you have to use renderer2 and not renderer (which is deprecated).

From angular document:

"Avoid direct use of the DOM APIs The built-in browser DOM APIs don't automatically protect you from security vulnerabilities. For example, document, the node available through ElementRef, and many third-party APIs contain unsafe methods. Avoid directly interacting with the DOM and instead use Angular templates where possible."

answered Feb 19, 2018 at 16:43

Omtechguy

3,6918 gold badges46 silver badges82 bronze badges

Comments

Manu · Accepted Answer · 2018-02-28 13:06:49Z

0

I finally use the import {DOCUMENT} from '@angular/platform-browser';to manipulate my DOM and implement my function like this:

 link(scope?, element?, attrs?) {
   const app = this.document.querySelector('#app');
   if (app.classList.contains('nav-collapsed-min')) {
      app.classList.remove('nav-collapsed-min');
      this.collapseService.notify(false);
   } else {
      app.classList.add('nav-collapsed-min');
      this.collapseService.notify(true);
   }
 }

So that worked great for me.

answered Feb 28, 2018 at 13:06

Manu

1,0751 gold badge15 silver badges24 bronze badges

Collectives™ on Stack Overflow

Add or remove DOM classes with jQuery in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related