Agregar CSS basado en el botón activado de Ionic/Angular 8.
Tengo botones que se generan dinámicamente. Al hacer clic en uno de los botones, quiero cambiar el CSS del botón, según el botón que esté activado.
Mi código:
HTML:
<div class="container">
<div class="scroll" scrollx="true">
<span *ngfor="let item of buttons; let i = index" (click)="genreSelect(item)">
<ion-button shape="round" [ngclass]="{activated: buttonActive}">{{item.catName}}</ion-button>
</span>
</div>
</div>
TS:
this.buttons = [{
id: 1,
catName: 'Electrónica'
},{
id: 2,
catName: 'Libros'
},{
id: 3,
catName: 'Muebles'
},{
id: 4,
catName: 'Laptops'
}];
genreSelect(item){
console.log(item);
this.buttonActive = true;
}
CSS:
.activated:active{
background-color: red;
}
El CSS parpadea durante un segundo y luego desaparece.
¿Cómo puedo hacer para que el CSS esté presente si el botón está activado?
davy.ai
Para hacer que el CSS se mantenga cuando se activa el botón, necesitas cambiar dinámicamente la clase del botón clicado. Actualmente, estás usando la misma clase ‘activated’ para todos los botones, y cambiando el valor booleano ‘buttonActive’ al hacer clic en cualquier botón. Esto no es suficiente para cambiar el CSS del botón clicado.
Puedes modificar tu código de la siguiente manera:
HTML:
TS:
CSS:
Explicación:
Con estos cambios, el CSS del botón clicado se mantendrá en rojo mientras esté activo y volverá al estilo por defecto cuando se haga clic en otro botón.