css - Elimină sau adaugă clasă în Angular

Am o listă și pluginul (dragula) pe care l-am folosit adaugă o anumită clasă CSS la o anumită acțiune. Folosesc Angular 5. Vreau să aflu prezența unei anumite clase (myClass) și să o elimin și să o înlocuiesc cu (yourClass). În jQuery putem face asta astfel

$( "p" ).removeClass( "myClass" ).addClass( "yourClass" );

Cum pot realiza acest lucru în Angular5. Aici problema principală este că myClass este adăugat automat la li selectat de plugin. Deci, folosind o funcție nu pot seta clasa.

Când am încercat cu renderer2, acesta elimină clasa CSS și adaugă o altă clasă. Dar o adaugă doar primului li. Codul meu este:

let myTag ; 
myTag = this.el.nativeElement.querySelector("li");
this.renderer.addClass(myTag, 'gu-mirrorss')
this.renderer.removeClass(myTag, 'dragbox');

<div  class="right-height" id ='dest' [dragula]='"second-bag"' [dragulaModel]="questions"> 
       {{ questions.length == 0 ? ' Drag and drop questions here ' : ' '}}
       <li #vc  data-toggle="tooltip" data-placement="bottom" title= {{question.questionSentence}} class="well dragbox"  *ngFor="let question of questions; let i = index" [attr.data-id]="question.questionId" [attr.data-index]="i" (click)="addThisQuestionToArray(question,i, $event)" [class.active]="isQuestionSelected(question)"  #myId > {{question.questionId}} {{question.questionSentence}}</li>
</div>

Răspuns #1

Importați ElementRef din angular core și definiți-l în constructor, apoi încercați codul de mai jos:

Linia de cod de mai jos îți va oferi prima apariție a etichetei <p> din Component. querySelector îți oferă primul element și querySelectorAll îți oferă toate elementele din DOM.

import { Component, ElementRef } from "@angular/core";

constructor(private el: ElementRef) {
}

let myTag = this.el.nativeElement.querySelector("p"); // you can select html element by getelementsByClassName also, please use as per your requirement.

Adaugă clasă:

if(!myTag.classList.contains('myClass'))
{
    myTag.classList.add('myClass'); 
}

Elimină clasa:

myTag.classList.remove('myClass'); 

Răspunsul #2

Poți folosi id în HTML-ul tău

<button #namebutton class="btn btn-primary">login</button>

adaugă viewchild în fișierul tău .ts

@ViewChild('namebutton', { read: ElementRef, static:false }) namebutton: ElementRef;

creează o funcție care va declanșa evenimentul

 actionButton() {
    this.namebutton.nativeElement.classList.add('class-to-add')
    setTimeout(() => {
      this.namebutton.nativeElement.classList.remove('class-to-remove')
    }, 1000);
  }
              

și apelează funcția.

Dacă elementul tău nativ nu este definit, verifică acest răspuns Angular: nativeElement este nedefinit pe ViewChild