toggle only one specific panel within a ngFor loop

Question

Hello I want to toggle one specific panel but if I click on the button the panels of other objects will be opened. How can I just open the clicked panel?

toggle.component.ts

 opened:Boolean=false;
 toggle () {

    this.opened = !this.opened;
  }

HTML

<div class="main" *ngFor="let x of data; let i=index;">
<footer>

  <div class="icons">
  <span id="{{item.id}}" (click)="toggle()">6<i class="fa fa-users {{i}}" ></i></span>
  <span >6<i class="glyphicon glyphicon-picture"></i></span>
  <span >6<i class="glyphicon glyphicon-tag"></i></span>
  <div class="iconsRight pull-right">
  <span >EXIF<i class="glyphicon glyphicon-info-sign"></i></span>
  <span ><i class="fa fa-map-marker"></i></span>
  <span ><i class="fa fa-share-alt-square"></i></span>
  </div>
  </div>

</footer>

<div class="togglePanel{{item.id}}" *ngIf="opened" >
  <hr/>
  <ul class="toggleWrapper">
    <li>YES</li>
    <hr/>
    <li>YES</li>
    <hr/>
    <li>YES</li>
    <hr/>
    <li>YES</li>

  </ul>
</div>
 </div>

Answer 1

You need to save state of individual panel. Currently you just set one variable which toggles all the panels.

In your toggle.component.ts, add a variable to store every item's state:

togglePanel: any = {};

Then, change your html to following:

<div class="main" *ngFor="let x of data; let i=index;">
    <footer>
        <div class="commentAgent">Text des Bewerters, der die Bearbeitung dieses Bildes vorgenommen hat</div>
        <div class="icons">
            <span id="{{item.id}}" (click)="togglePanel[i] = !togglePanel[i]">6<i class="fa fa-users {{i}}" ></i></span>
            <span>6<i class="glyphicon glyphicon-picture"></i></span>
            <span>6<i class="glyphicon glyphicon-tag"></i></span>
            <div class="iconsRight pull-right">
                <span>EXIF<i class="glyphicon glyphicon-info-sign"></i>/span>
                <span><i class="fa fa-map-marker"></i></span>
                <span><i class="fa fa-share-alt-square"></i></span>
            </div>
        </div>
    </footer>
    <div class="togglePanel{{item.id}}" *ngIf="togglePanel[i]">
        <hr/>
        <ul class="toggleWrapper">
            <li>YES</li>
            <hr/>
            <li>YES</li>
            <hr/>
            <li>YES</li>
            <hr/>
            <li>YES</li>
        </ul>
    </div>
</div>

Also, you don't need the toggle() method and the variable opened in this approach.

Answer 2

If you need only one panel opened, then this method will work. Instead on setting your 'flag' property boolean, use number. It will keep the panel id. Set it to the panel id and you don't need an additional property on your data:

Typescript:

opened = -1;
toggle (index) {

    this.opened = index;
 }

HTML:

....
  <span id="{{item.id}}" (click)="toggle(item.id)">6<i class="fa fa-users {{i}}" ></i>
...

<div class="togglePanel{{item.id}}" *ngIf="opened===item.id" >