Cómo eliminar el estilo al hacer clic en un botón.

Tengo un botón que está dentro de un bucle ngFor. Estoy aplicándole estilo de la siguiente manera.

<div *ngfor="let component of componentList; let index=index"> <button type="button" id='Button{{index}}' name='Button{{index}}' class='device_name_button' [ngclass]="{'greencolorstyle': component.status=='Available', 'redcolorstyle': component.status=='Faulted', 'graycolorstyle':component.status=='Unavailable', 'myClass':isClicked==true}" (click)="selectComponent($event,component.components)"> {{component.name}} </button> </div>

Estoy estableciendo isClicked = true con el controlador de eventos de clic.

Mi problema es que cuando veo el estilo aplicado en el botón después de hacer clic, veo 'device_name_button greencolorstyle myClass'. Sin embargo, después de hacer clic solo debería tener 'device_name_button' y 'myClass'.

¿Cómo puedo eliminar las otras clases de este botón cuando alguien hace clic en él?

davy.ai

August 2, 2023 at 12:34 pm

Puedes usar la directiva ngClass para aplicar estilos de forma condicional a un elemento basándote en el valor de una variable. Para eliminar las otras clases del botón cuando alguien hace clic en él, puedes vincular la directiva ngClass a un objeto que contenga la lista de clases a aplicar.

En tu caso, puedes crear un objeto que contenga únicamente las clases que deseas aplicar al hacer clic, de esta manera:

<button [ngclass]="{'device_name_button': true, 'myClass': isClicked}" (click)="isClicked = true">
  {{ component.name }}
</button>

Esto solo aplicará las clases ‘device_name_button’ y ‘myClass’ cuando se haga clic en el botón. También puedes vincular la directiva ngClass a una función que devuelva la lista de clases a aplicar según el estado del botón, de esta manera:

<button [ngclass]="getButtonClasses(component)" (click)="selectComponent($event, component.components)">
  {{ component.name }}
</button>

Luego define la función ‘getButtonClasses’ en tu componente:

getButtonClasses(component) {
  return {
    'device_name_button': true,
    'greencolorstyle': component.status == 'Disponible',
    'redcolorstyle': component.status == 'Con fallas',
    'graycolorstyle': component.status == 'No disponible',
    'myClass': isClicked
  };
}

Esto aplicará las clases apropiadas según el estado del botón y también aplicará la clase ‘myClass’ cuando se haga clic en el botón.

Answer

davy.ai

August 2, 2023 at 12:34 pm
Puedes usar la directiva ngClass para aplicar estilos de forma condicional a un elemento basándote en el valor de una variable. Para eliminar las otras clases del botón cuando alguien hace clic en él, puedes vincular la directiva ngClass a un objeto que contenga la lista de clases a aplicar.

En tu caso, puedes crear un objeto que contenga únicamente las clases que deseas aplicar al hacer clic, de esta manera:
```
<button [ngclass]="{'device_name_button': true, 'myClass': isClicked}" (click)="isClicked = true">
  {{ component.name }}
</button>
```
Esto solo aplicará las clases ‘device_name_button’ y ‘myClass’ cuando se haga clic en el botón. También puedes vincular la directiva ngClass a una función que devuelva la lista de clases a aplicar según el estado del botón, de esta manera:
```
<button [ngclass]="getButtonClasses(component)" (click)="selectComponent($event, component.components)">
  {{ component.name }}
</button>
```
Luego define la función ‘getButtonClasses’ en tu componente:
```
getButtonClasses(component) {
  return {
    'device_name_button': true,
    'greencolorstyle': component.status == 'Disponible',
    'redcolorstyle': component.status == 'Con fallas',
    'graycolorstyle': component.status == 'No disponible',
    'myClass': isClicked
  };
}
```
Esto aplicará las clases apropiadas según el estado del botón y también aplicará la clase ‘myClass’ cuando se haga clic en el botón.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo eliminar el estilo al hacer clic en un botón.

Answer

davy.ai