es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

alternar mostrar/ocultar en Angular

06 Aug, 2023 Programación

Tengo 4 tarjetas en mi página HTML, necesito mostrar matTooltip en la función de clic para mostrar/ocultar matTooltip en Angular. Estaba llamando al mismo método en todos los tooltips pero para todos solo muestra los datos del primer matTooltip.

app.component.html:

<div class="card-body">
    <div class="ml-auto p-2 pointer" mattooltip="Aquí puedes ver uno" mattooltipposition="above" (click)="toggleShowTooltip()">
        <i class="info-icon"></i>
    </div> 
</div> 

<div class="card-body">
    <div class="ml-auto p-2 pointer" mattooltip="Aquí puedes ver dos" mattooltipposition="above" (click)="toggleShowTooltip()">
        <i class="info-icon"></i>
    </div> 
</div> 

<div class="card-body">
    <div class="ml-auto p-2 pointer" mattooltip="Aquí puedes ver tres" mattooltipposition="above" (click)="toggleShowTooltip()">
        <i class="info-icon"></i>
    </div> 
</div> 

<div class="card-body">
    <div class="ml-auto p-2 pointer" mattooltip="Aquí puedes ver cuatro" mattooltipposition="above" (click)="toggleShowTooltip()">
        <i class="info-icon"></i>
    </div> 
</div>

app.component.ts:

@ViewChild(MatTooltip) tooltip: MatTooltip;
toggleShowTooltip(): void {
    this.tooltip.show();
}

Gracias.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código proporcionado es que está haciendo referencia a la misma instancia de tooltip utilizando el decorador ViewChild. Para mostrar/ocultar diferentes tooltips, es necesario tener una referencia a cada elemento de tooltip de forma individual. Una forma de lograr esto es pasar una variable de referencia de plantilla a la función toggleShowTooltip() y usarla para mostrar/ocultar el tooltip correspondiente.

    Aquí tienes un ejemplo:

    app.component.html:

     <div class="card-body">
   <div class="ml-auto p-2 pointer" #tooltipone="matTooltip" mattooltip="Aquí puedes ver el uno" mattooltipposition="above" (click)="toggleShowTooltip(tooltipOne)">
     <i class="info-icon"></i>
   </div> 
 </div> 
 <div class="card-body">
   <div class="ml-auto p-2 pointer" #tooltiptwo="matTooltip" mattooltip="Aquí puedes ver el dos" mattooltipposition="above" (click)="toggleShowTooltip(tooltipTwo)">
     <i class="info-icon"></i>
   </div> 
 </div> 
 <div class="card-body">
   <div class="ml-auto p-2 pointer" #tooltipthree="matTooltip" mattooltip="Aquí puedes ver el tres" mattooltipposition="above" (click)="toggleShowTooltip(tooltipThree)">
     <i class="info-icon"></i>
   </div> 
 </div> 
 <div class="card-body">
   <div class="ml-auto p-2 pointer" #tooltipfour="matTooltip" mattooltip="Aquí puedes ver el cuatro" mattooltipposition="above" (click)="toggleShowTooltip(tooltipFour)">
     <i class="info-icon"></i>
   </div> 
 </div>

    app.component.ts:

       toggleShowTooltip(tooltip: MatTooltip): void {
     tooltip.show();
   }

Comments are closed.