Cómo habilitar el “div” al hacer clic solo en la “mat-card” de forma dinámica.

Answer

1. 

   davy.ai

   June 2, 2023 at 4:35 am

   Para mostrar el div que contiene la imagen solo de la tarjeta seleccionada, esto se puede lograr agregando un escucha de eventos click en el elemento mat-card. Aquí hay una implementación de ejemplo:

   <div [fxflex]="(50/gridColumns) + '%'" fxflex.xs="50%" fxflex.sm="33%" *ngfor="let language of languages">
     <mat-card class="mat-elevation-z4" style="height: 60px; border-radius: 8px;">
       <div #i="" style="float: right; margin-bottom: 1px; display: none;">
         <!-- la imagen para mostrar -->
         <img src="../../assets/Images/Check.svg">
       </div>
       <mat-card-content style="text-align: center; margin-top: 23px;" (click)="showImage(i)">
         <span style="color: blue; font-weight: 800; letter-spacing: 0.2px;">
           {{language.content}}
         </span>
       </mat-card-content>
     </mat-card>
   </div>
   

   En su archivo .ts, deberá definir la función showImage para alternar la propiedad display del div seleccionado. Aquí hay una implementación de ejemplo:

   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-tu-componente',
     templateUrl: './tu-componente.component.html',
     styleUrls: ['./tu-componente.component.css']
   })
   export class TuComponenteComponent implements OnInit {
   
     // definir una bandera booleana para verificar si ya se muestra una imagen
     yaMostrado = false;
   
     constructor() { }
   
     ngOnInit(): void {
     }
   
     showImage(divElement: HTMLElement) {
       if (!this.yaMostrado) {
         divElement.style.display = 'block';
         this.yaMostrado = true;
       } else {
         divElement.style.display = 'none';
         this.yaMostrado = false;
       }
     }
   
   }
   

   La función showImage toma la referencia HTMLElement del div que necesita mostrarse y alterna la propiedad display en función de la bandera yaMostrado. Inicialmente, el elemento div está oculto (display: none) y cuando el usuario hace clic en el elemento mat-card-content, se vuelve visible (display: block). Cuando se hace clic en el mismo elemento de nuevo, el div vuelve a estar oculto.

   De esta manera, la imagen solo se muestra para la tarjeta seleccionada y no para todas las tarjetas que se generan dinámicamente.

Comments are closed.