web-dev-qa-db-fra.com

Supprimer ou ajouter une classe dans Angular

J'ai une liste et le plugin (dragula) que j'ai utilisé, ajoute une certaine classe CSS sur certaines actions. J'utilise Angular 5. Je veux découvrir la présence d'une certaine classe (myClass) et la supprimer et la remplacer par (yourClass). Dans jQuery on peut faire ça comme ça

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

Comment puis-je y parvenir dans Angular5. Ici, le problème principal est que myClass est ajouté automatiquement au li sélectionné par le plugin. Donc, en utilisant une fonction, je ne peux pas définir la classe.

Lorsque j'ai essayé avec renderer2, il supprime la classe CSS et ajoute une autre classe. Mais il ajoute seulement au premier li. Mon code est:

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>
cssangulartypescript
6
Senchu Thomas

Importez ElementRef depuis angular et définissez dans le constructeur puis essayez le code ci-dessous:

La ligne de code ci-dessous vous donnera la première occurrence de <p> balise du composant. querySelector vous donne le premier élément et querySelectorAll vous donne tous les éléments du 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.

Ajouter une classe:

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

Supprimer la classe:

myTag.classList.remove('myClass');
12
Sandip - Full Stack Developer

Si vous voulez changer tous les li.myClass, vous pouvez faire comme ceci:

Noter la #questions dans le conteneur div.

Component.ts

@ViewChild('questions') questions: any;

questions.nativeElement.querySelectorAll('.myClass').forEach(
  question => {
    question.classList.remove('myClass');
    question.classList.add('newClass');
  }
)

Component.html

<div #questions 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>
2
LordAlpaca

De Documents officiels

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
1
WasiF

La manière la meilleure et la plus simple est: -

Si l'élève est nul, alors non désactivé, sinon. Utilisez cet attribut dans le bouton. Si vous utilisez bootstrap theme

[ngClass]="{disabled: (students === null) ? true : false}"
0
Inamur Rahman

Vous pouvez utiliser id dans votre html

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

ajouter viewchild dans tour.ts

@ViewChild('buttonLogin') buttonLogin: ElementRef;

créer une fonction qui déclenchera l'événement

 actionButton() {
    this.buttonLogin.nativeElement.classList.add('clase a activar ')
    setTimeout(() => {
      this.buttonLogin.nativeElement.classList.remove('clase a desactivar')
    }, 1000);
  }

et appelez la fonction.

0
Daniel Lopez