¿Cómo cambiar el color usando ngFor en Ionic?

Answer

1. 

   davy.ai

   July 28, 2023 at 2:38 am

   Para cambiar el color de una tarjeta de una lista utilizando ngFor, puedes utilizar la directiva [ngStyle] en el elemento ion-card-title para establecer el color de fondo de forma dinámica en función del valor de color en la lista.

   Aquí tienes un ejemplo de código:

   <ion-card *ngfor="let color of color_pallet">
     <ion-card-header>
       <ion-card-title [ngstyle]="{ 'background': color }" style="color:#ffffff;">{{ color }}</ion-card-title>
     </ion-card-header>
     <ion-card-content>
     </ion-card-content>
   </ion-card>
   

   En este código, estamos iterando a través de la lista color_pallet y por cada color estamos creando una ion-card con un encabezado y un título. Estamos utilizando el enlace de atributo [ngStyle] para establecer dinámicamente el color de fondo del título en función del valor de color actual. También estamos estableciendo el color de fuente del título en blanco utilizando el atributo style.

   Esto debería resultar en una lista de tarjetas, cada una con un color de fondo diferente basado en los valores de color en la lista.

Comments are closed.