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?

toggleponent.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>

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.ponent.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>

• javascript
• angular
• typescript

Share Improve this question Follow edited Aug 28, 2017 at 14:02 mogli mogli asked Aug 28, 2017 at 12:32 mogli moglimogli mogli 26111 gold badge55 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

In your toggle.ponent.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="mentAgent">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.

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" >