alternar mostrar/ocultar en Angular
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.
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:
app.component.ts: