Événement angulaire ngClass et click pour basculer la classe

Question

Dans Angular, je voudrais utiliser ngClass et cliquer sur événement pour basculer la classe. J'ai regardé en ligne, mais certains sont angulaires1 et il n'y a pas d'instructions ou d'exemples clairs. Toute aide sera très appréciée!

En HTML, j'ai les éléments suivants:

 <div class="my_class" (click)="clickEvent($event)"  ngClass="{'active': toggle}">                
     Some content
</div>
 

En .ts:

  clickEvent(event){
    //Haven't really got far
    var targetEle = event.srcElement.attributes.class;        
 }     
 

Answer 1

Cela devrait fonctionner pour vous:

 <div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

status: boolean = false;
clickEvent(){
    this.status = !this.status;       
}
 

Answer 2

Au lieu d'avoir à créer une fonction dans le fichier ts, vous pouvez basculer une variable du modèle lui-même. Vous pouvez ensuite utiliser la variable pour appliquer une classe spécifique à l'élément. Ainsi-

 <div (click)="status=!status"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>
 

Ainsi, lorsque le statut est vrai, le succès de classe est appliqué. Quand c'est faux, la classe de danger est appliquée.

Cela fonctionnera sans aucun code supplémentaire dans le fichier ts.

Answer 3

Angular6 utilisant le renderer2 sans aucune variable et un modèle propre:

modèle:

 <div (click)="toggleClass($event,'testClass')"></div>
 

en ts:

 toggleClass(event: any, class: string) {
  const hasClass = event.target.classList.contains(class);

  if(hasClass) {
    this.renderer.removeClass(event.target, class);
  } else {
    this.renderer.addClass(event.target, class);
  }
}
 

On pourrait aussi mettre cela dans une directive;)

Answer 4

ngClass doit être placé entre crochets car il s'agit d'une liaison de propriété. Essaye ça:

 <div class="my_class" (click)="clickEvent($event)"  [ngClass]="{'active': toggle}">                
     Some content
</div>
 

Dans votre composant:

      //define the toogle property
     private toggle : boolean = false;

    //define your method
    clickEvent(event){
       //if you just want to toggle the class; change toggle variable.
       this.toggle != this.toggle;       
    }
 

J'espère que cela pourra aider.

Answer 5

Si vous souhaitez basculer le texte avec un bouton bascule.

Fichier HTML qui utilise le bootstrap:

 <input class="btn" (click)="muteStream()"  type="button"
          [ngClass]="status ? 'btn-success' : 'btn-danger'" 
          [value]="status ? 'unmute' : 'mute'"/>
 

Fichier TS:

 muteStream() {
   this.status = !this.status;
}