Angulaire ngClass et événement click pour la classe de basculement

Question

En Angulaire, je voudrais utiliser ngClass et cliquer sur l'événement pour basculer la classe. J'ai regardé en ligne mais certains sont angulaires1 et il n'y a pas d'instruction ou d'exemple clair. Toute aide sera très appréciée!

En HTML, je donne les résultats 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 travailler 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

ngClass doivent être placées entre crochets car cela est une propriété de liaison. Essayez ceci:

<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;  
    } 

espoir qui aide.

Answer 3

Les variables peuvent être activées à partir du modèle comme si -

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

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