Agregar CSS basado en el botón activado de Ionic/Angular 8.

Answer

1. 

   davy.ai

   August 2, 2023 at 3:04 am

   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:

   <div class="container">
   <div class="scroll" scrollx="true">
     <span *ngfor="let item of buttons; let i = index">
       <ion-button shape="round" [ngclass]="{'activated': item.active}" (click)="genreSelect(item)">
         {{item.catName}}
       </ion-button>
     </span>
   </div>
   </div>
   

   TS:

   this.buttons = [{
         id: 1,
         catName: 'Electrónica',
         active: false
       },{
         id: 2,
         catName: 'Libros',
         active: false
       },{
         id: 3,
         catName: 'Muebles',
         active: false
       },{
         id: 4,
         catName: 'Laptops',
         active: false
       }];
   
   genreSelect(item){
       console.log(item);
   
       this.buttons.forEach((button) => {
         button.active = false; // desactiva todos los demás botones
       });
   
       item.active = true; // activa el botón clicado
     }
   

   CSS:

   .activated {
       background-color: red;
   }
   

   Explicación:

   • En el HTML, estamos vinculando la propiedad ‘active’ de cada botón a la clase de CSS ‘activated’ utilizando la directiva ngClass. Inicialmente, todos los botones tienen ‘active’ como false, por lo que ningún botón tendrá la clase de CSS ‘activated’.
   • En el archivo JS, estamos manteniendo la propiedad ‘active’ de cada botón en el arreglo ‘buttons’ y estableciéndola como true para el botón clicado y como false para todos los demás botones. Esto provocará que la directiva ngClass agregue o elimine dinámicamente la clase de CSS ‘activated’.
   • En el archivo CSS, estamos definiendo los estilos para la clase de CSS ‘activated’.

   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.

Comments are closed.