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 https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02. Anyway, most of this cases where you just want to toggle class can be done with `ngClass` directive — nicowernli, Feb 19 '18 at 14:59

score 0 · Answer 1 · answered Feb 19 '18 at 15:33

0

use ngClass in your html. eg:

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

answered Feb 19 '18 at 15:33

Gagan Prajapati

140
7

score 0 · Answer 2 · answered Feb 19 '18 at 16:43

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."

score 0 · Answer 3 · answered Feb 28 '18 at 13:06

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.

Add or remove DOM classes with jQuery in Angular

3 Answers3