web-dev-qa-db-fra.com

Classe angulaire ng et événement de clic pour la classe de bascule

Dans Angular, je voudrais utiliser ngClass et cliquer sur un événement pour changer de 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, 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;        
 }
angularangular-ng-class
20
steve Kim

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;       
}
42
Mani S

Au lieu d'avoir à créer une fonction dans le fichier ts, vous pouvez basculer une variable depuis le 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 true, le succès de la classe est appliqué. Quand il est faux, la classe de danger est appliquée. 

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

12
charsi

ngClass doit être placé entre crochets car il s'agit d'une propriété de liaison. 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.

3
Saurabh Tiwari

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

3
FaustmannChr

Si vous souhaitez basculer le texte avec un bouton.

HTMLfile qui utilise 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;
}
0
Bilal Ahmad