Here is a simple code snippet:
<ul>
<li *ngFor="let item of list">
<div class="button">Click to show text</div>
<div class="text">hello</div
</li>
</ul>
The goal is to create and assign a local variable called isVisible to each "hello" div so that when the .button element is clicked, only the corresponding text will be shown. I attempted to achieve this using the following code:
<ul>
<li *ngFor="let item of list">
<div class="button" (click)="isVisible ? isVisible = false : isVisible = true">Click to show text</div>
<div *ngIf="isVisible" class="text">hello</div
</li>
</ul>
However, clicking on the .button causes every .text div to be displayed. Is there a correct alternative method for achieving the desired behavior?
I am aware that one solution involves assigning an additional boolean variable (isVisible) to each item before displaying it, but I am exploring other approaches at the moment.