else - Angular ngClass y haga clic en evento para alternar clase

ng-class conditional

Question

En Angular, me gustaría usar ngClass y hacer clic en evento para cambiar de clase. Revisé en línea, pero algunos son angulares1 y no hay ninguna instrucción o ejemplo claro. ¡Cualquier ayuda será muy apreciada!

En HTML, tengo lo siguiente:

<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

Angular6 usando el renderer2 sin ninguna variable y una plantilla limpia:

modelo:

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

Uno podría poner esto en una directiva también;)

Answer 2

En lugar de tener que crear una función en el archivo ts, puede alternar una variable desde la propia plantilla. Luego puede usar la variable para aplicar una clase específica al elemento. Al igual que-

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

Entonces, cuando el estado es verdadero, se aplica el éxito de la clase. Cuando es falso se aplica la clase de peligro.

Esto funcionará sin ningún código adicional en el archivo ts.

Answer 3

Esto debería funcionar para usted:

<div class="my_class" (click)="clickEvent()"
[ngClass]="status ? ''success'' : ''danger''">
Some content
</div>
status: boolean = false;
clickEvent(){
this.status = !this.status;
}

Answer 4

Si desea alternar texto con un botón de alternar.

Archivo HTML que está utilizando bootstrap:

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

Archivo TS:

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

Answer 5

ngClass debe incluirse entre corchetes, ya que se trata de un enlace de propiedad. Prueba esto:

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

En su componente:

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

Espero que ayude.