Bootstrap collapse in Angular js

Question

I have a problem with using bootstrap collapse ui with angularJs. When I click on arrow button, it's collapsing all items(divs) instead of one. Could any body help me please how can I define selected item(div) to be collapsed instead of all? Here's my code.Thanks.

  <div class="panel">
      <div class="panel-header">
        <div class="panel-header-info">
          <div class="items_list" *ngFor="let item of items">
            <div class="items_arrow_button" (click)="isCollapsed = !isCollapsed">
              <div class="img">
                <img src="./assets/images/img.png" class="img-responsive">
              </div>
              <span> Test data {{data.data}}</span>
              <i class="fa" [ngClass]="{'fa-angle-down': isCollapsed, 'fa-angle-up': !isCollapsed}"></i>
            </div>
            <div class="items_list" [collapse]="isCollapsed">
              <ul>
                <li>
                  <h2>First item</h2>
                  <span>{{data.item}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

Its because isCollapsed is the only basis that your collapsible have. Add isCollapsed as a property in your item . and then use item.isCollapsed for the collapse toggle.

Answer 2

You are using the same variable for each item.

To solve your problem, you can:

• Store the variable isCollapse in the item variable but you have to update your model to store a context variable
• Create an array of N elements and you handle each state in this array
• Use a directive/component Collapse which handles is own state